The right way to edit X Woocommerce CSS

[finkk]

Hello there,

I would like to remove the hover effect that displays Add to Cart button on the four products under Featured Products here:

http://odettel.sg-host.com/

What is the right way to do this? Simply overwrite the CSS in x-woocommerce.min.css or do you have a recommended method?

Also, none of the Gutenberg Woo elements are available when I edit with Pro - is there any way I can use these within the Pro editor?

Kind regards,

Spencer

[prakash_s]

Hello Spencer,

Thanks for writing to us.

To override the CSS of WooCommerce you can add your custom CSS code in Pro-->Theme option --->CSS.

In case if you are using a child theme you can add your custom CSS in child theme’s style.css file.

If you have an idea about coding you can enqueue new CSS file through your child theme functions.php file. Please a look at this article to learn more how to enqueue CSS file.

Gutenberg is the default page builder for WordPress. In case if you have designed any page with Pro page builder, you can not use any element of Gutenberg in Pro page builder. You can use WooCommerce shortcodes in Pro page builder by using “Text” element.

Please have a look at this article for Shortcode https://docs.woocommerce.com/document/woocommerce-shortcodes/

To use shortcode check out our documentation

In case if you haven’t seen our theme WooCommerce documentation please have a look at our WooCommerce documentation

WooCommerce | Themeco Docs

Thanks