WooCommerce Variable Product comes with a clear button. By default, the button is hidden. It becomes visible once you select a product attribute. Here you will learn how to hide/remove the WooCommerce clear button. In addition, you will also learn how to customize it.
The WooCommerce clear button aims to reset selected attributes quickly. After resetting the currently selected attributes, you can easily reselect your desired attributes.
The WooCommerce clear button improves user experience and saves time. Some products may have several attributes, and you can reset your selections with one click. However, despite the benefits, you may want to remove the WooCommerce clear button from your store.
By default, WooCommerce offers drop-down select options for the variable products. The clear button usually appears right beside the variation drop-down selection. The position and appearance of the clear button differ based on the theme.
FYI: You can replace the default drop-down with different attribute swatches (Color, Image, and Button) using a Variation Swatches for WooCommerce plugin. Most of the popular WooCommerce themes also offer the attribute swatches option. So, if you have variation swatches in your store, the clear button will appear beside the variation swatches instead of the drop-down.
Brief history of the WooCommerce Clear Button
Historically, it was a reset link. The clear text was inside an anchor tag. In WooCommerce 9.5.0 the markup was changed to a button. But, the behavior was the same.
Due to this change, you may have experienced design issues in your store. Themes and page builders have custom styles for buttons.
The change has been reverted to the link in WooCommerce 9.6.0. As a result, the issues should be gone if you are using WooCommerce 9.6.0 or higher.
Remove WooCommerce Clear Button
Let’s learn how to hide/remove WooCommerce Clear Button.
There are multiple ways to remove the WooCommerce clear button from variable products. You can do it either by using CSS or with a PHP snippet. CSS hides the element from the product page. On the other hand, you can completely remove the item from the page using PHP.
Hiding the Clear Button Using CSS
Please add the following CSS to the customizer (Appearance > Customize > Additional CSS):
a.reset_variations {
display: none;
}If you have a child theme, please add the CSS to your themes styles.css file.
Note: Do not add customizations to the main (parent) theme. Adding customizations to the main (parent) theme is not recommended. Updating the main theme will override (remove) all customizations. We will share more details on this later in this article.
Removing the Clear Button Using PHP
Use the following snippet to remove the clear button from the product pages.
add_action( 'woocommerce_reset_variations_link' , function(){
return false;
}, 15 );Add the snippet to the child themes functions.php file. You can also use the Code Snippets plugin to add it if you don’t have a child theme.
WooCommerce Clear Button Customization
Apart from removing the clear button, you can customize it.
Learn how to change the default text from Clear to something else using a PHP snippet. Moreover, we will show you how to customize the visual appearance using CSS.
Use the following snippet to replace the existing text with a custom text.
add_filter( 'woocommerce_reset_variations_link', function($html){
return '<a class="reset_variations" href="#">' . esc_html__( 'Your Text', 'woocommerce' ) . '</a>';
}
);Replace “Your Text” in the snippet using your desired string.
This is helpful if you want to translate the text into your local language.
How about changing the visual appearance of the clear button?
The following CSS will change the text color to red.
a.reset_variations {
color: red;
}Using the above selector you can further modify the appearance of the clear button. Here is another example of CSS that will change the font weight to bold.
a.reset_variations {
font-weight: bold;
}Adding Custom Snippets to your WordPress site
You may need to add custom snippets to your site to add, tweak, or remove a default feature. What is the best way to do that?
First of all, it is recommended to have a child theme. Once you have installed your desired theme, the first step should be to create a child theme. The main theme is referred to as the parent theme.
Updating the parent theme does not remove your customizations from the child theme. On the contrary, when you update the main theme all customizations added to it are overridden (removed). As a result, it is important to use a child theme.
Hopefully, you follow the best standards and use a child theme on your site. When you need to add custom PHP snippets, please add them to the functions.php file of the child theme.
Otherwise, you can use the Code Snippets plugin to add custom snippets. It’s a very popular plugin and does the job perfectly.
Despite your goal to remove or customize the WooCommerce clear button, We believe you found the article helpful. If you have any suggestions, please share them with us.