How to Customize the Button in Product By Category Element

To customize or change the button color in the Product By Category element, you have a couple of options. You can use custom CSS, edit the CSS through the theme code, or install a plugin designed for styling WooCommerce elements, such as Elementor. You might also find this forum topic useful:?Changing?ButtonColours?on?WooCommerce.

Regarding the broken Sale logo, if everything appears normal in the backend, the issue could be related to caching or a CSS conflict. I recommend clearing the cache if you’re using a caching plugin, as well as clearing your browser cache to see if that resolves the issue. Additionally, consider disabling your plugins temporarily, as one of them might be conflicting with your CSS and causing the button issue.

Hi,

I tried to press F12 if there are some errors in the page. Is this related to the Sale icon?

By the way I am using Cloudfare. Thank you! @linaasenova

https://drive.google.com/file/d/17xAUEFoCbis5LB-LKALaD3N_vHuzp9i0/view?usp=sharing

VM575:3 Scripts that have a dependency on [wc-settings, wc-blocks-checkout] must be loaded in the footer, klaviyo-klaviyo-checkout-block-editor-script was registered to load in the header, but has been switched to load in the footer instead. See https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/5059

To start, try clearing the Cloudflare cache to ensure that any recent changes are properly reflected on the front end. Additionally, review your configuration settings, as incorrect configurations can lead to unexpected behaviors.

Regarding the console errors you shared, it looks like some scripts related to WooCommerce are being loaded in the wrong order. These scripts need to load in the footer, but they’re being loaded in the header instead. This can happen if a caching or minifying plugin is changing the loading order or if a plugin isn’t properly set up.

To troubleshoot this:

1. Check your caching/minifying plugins: Some of these plugins have options to reorder JavaScript or to minify them. Try disabling JavaScript minification or reordering if it’s enabled, then clear the cache.

2. Ensure plugins are up to date: Sometimes, outdated plugins can lead to compatibility issues. Check if WooCommerce, payment, or other related plugins are up to date.

3. Disable plugins one by one: Temporarily disable your plugins and re-enable them one by one to identify if a particular plugin is causing the issue.

If you find which plugin is responsible, you can reach out to their support forum for better assistance.