Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How to Add Color Swatches as Product Input Fields to WooCommerce Product Page?

When you set up a new variable product in your online store with the default WooCommerce options, colors are typically provided as a select option. But does this make it clear what exact color the product is? Seeing the color gives much better clarity, right? That’s exactly what we’ll achieve with this WooCommerce customization. Adding color swatches makes shopping easier by letting customers visually pick their favorite colors with just a click.

Without these modern, user-friendly features, your store might seem outdated and less professional compared to your competitors. Let’s see how to add the smart color swatch as a product input field in your WooCommerce product page.

Solution: Add Color Swatches as Product Input Fields to WooCommerce Product Page

The code adds color swatches to the WooCommerce product page, allowing customers to select a color for a specific product with the ID 759.

add_action( 'woocommerce_before_add_to_cart_button', 'ts_display_color_swatches', 9 );
function ts_display_color_swatches() {
global $product;
$product_id = $product->get_id(); // Get the product ID
// Check if the product ID matches the desired ID (759 in this case)
if ( $product_id === 759 ) {
echo '<div class="color-swatches">';
echo '<label class="color-swatch" style="background-color:#ffcccc; width: 60px; height: 60px; margin-right: 20px; display: inline-block; position: relative; text-align: center;">';
echo '<input type="radio" name="color" value="#ffcccc" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer;">';
echo '</label>';
echo '<label class="color-swatch" style="background-color:#ccccff; width: 60px; height: 60px; margin-right: 20px; display: inline-block; position: relative; text-align: center;">';
echo '<input type="radio" name="color" value="#ccccff" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer;">';
echo '</label>';
echo '<label class="color-swatch" style="background-color:#ccffcc; width: 60px; height: 60px; margin-right: 20px; display: inline-block; position: relative; text-align: center;">';
echo '<input type="radio" name="color" value="#ccffcc" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer;">';
echo '</label>';
echo '</div>';
}
}

// Add selected color swatch to cart item data for a specific product
add_filter( 'woocommerce_add_cart_item_data', 'ts_add_color_to_cart', 10, 2 );
function ts_add_color_to_cart( $cart_item_data, $product_id ) {
// Check if the product ID matches the desired ID (759 in this case)
if ( $product_id === 759 && isset( $_POST['color'] ) && ! empty( $_POST['color'] ) ) {
$cart_item_data['color'] = sanitize_text_field( $_POST['color'] );
}
return $cart_item_data;
}

// Display selected color swatch in cart and checkout for a specific product
add_filter( 'woocommerce_get_item_data', 'ts_display_color_in_cart', 10, 2 );
function ts_display_color_in_cart( $cart_data, $cart_item ) {
// Check if the product ID matches the desired ID (759 in this case)
if ( isset( $cart_item['color'] ) && $cart_item['product_id'] === 759 ) {
$cart_data[] = array(
'name' => 'Color',
'value' => '<div class="color-swatch" style="background-color:' . esc_attr($cart_item['color']) . '; width: 80px; height: 80px; display: inline-block; margin-right: 10px;"></div>',
);
}
return $cart_data;
}

// Save the selected color to the order items for a specific product
add_action( 'woocommerce_checkout_create_order_line_item', 'ts_save_color_to_order_items', 10, 4 );
function ts_save_color_to_order_items( $item, $cart_item_key, $values, $order ) {
// Check if the product ID matches the desired ID (759 in this case)
if ( isset( $values['color'] ) && $values['product_id'] === 759 ) {
$item->add_meta_data( 'Color', $values['color'], true );
}
}

// Display selected color in admin order items table for a specific product
add_filter( 'woocommerce_order_item_name', 'ts_color_display_in_admin_order_items_table', 10, 2 );
function ts_color_display_in_admin_order_items_table( $item_name, $item ) {
// Check if the item has a selected color associated with it
$product_id = $item->get_product_id();
if ( $product_id === 759 && $color = $item->get_meta( 'Color' ) ) {
// Append the selected color to the item name
$item_name .= '<br><small>' . esc_html__( 'Color:', 'your-textdomain' ) . ' <div class="color-swatch" style="background-color:' . $color . '; width: 20px; height: 20px; display: inline-block;"></div></small>';
}
return $item_name;
}

Output

When a user visits the product page for the product with ID 759, a set of color swatches (red, blue, and green) are displayed as radio buttons . Each swatch is styled with a specific background color and size, allowing the user to visually select their preferred color option.

How to Add Color Swatches as Product Input Fields to WooCommerce Product Page? - Tyche Softwares

To wrap things up, enhancing your WooCommerce product pages with color swatches works well for products with variations. Likewise, if you want to target simple products, you can either add a text input field or simply integrate a checkbox input field and customize the product page the way you want.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
3 Comments
Newest
Oldest
Inline Feedbacks
View all comments
Sebastian
13 days ago

Hi, would you know why

‘value’ => ”,

does not output any custom html in the cart?
Been trying with everything and only can output the value of meta, but when used inside html, it does not work.

Sebastian
13 days ago
Reply to  Saranya

Yes, you are right. It does not work in blocks. I was not aware of recent woocommerce changes, been spending hours trying to figure out why my code does not work and almost lost hope. Works perfect in classic cart.

3
0
Would love your thoughts, please comment.x
()
x