Extra WooCommerce category and tags cut-off

 

If you are running the Extra theme with WooCommerce, you may have noticed the WordPress category and tags for your products are being cut off. This is an issue with Elegant Themes and the fix is easy.

Please, go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and add the following:

.product_meta {

margin-bottom: 25px !important;

}

Read More

Increase pricing text size on WooCommerce products

Looking to increase the size of the pricing text on the woocommerce pages?

You can use the following CSS rule in your themes custom CSS:

.woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price, .woocommerce-page ul.products li.product .price del {

font-size: 18px;

}

Read More

How to Remove Sidebar from WooCommerce Shop and Category Page

Looking to make category pages full width? There are many posts online that tell you to edit core WooCommerce files. This is not the best practice as there are regular updates to the WooCommerce plugin. When you update the plugin, it will revert back to the page with the sidebar.

Please add this CSS code into Divi > Theme Options > General > Custom CSS field.

#left-area {
padding-right: 0 !important; width: 100%;
}
#sidebar {
display: none;
}
#main-content .container::before {
display: none;
}

Read More

Change No products were found matching your selection background color for WooCommerce

If you install the WooCommerce plugin for WordPress, you may notice some colors do not match your WordPress theme. You can add a CSS over-ride to change the default color here.

Add this CSS code to make the blue background black. 

woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message {
    background: #000!important;
}

Read More

Remove WooCommerce cart icon from DIVI header

To remove the WooCommerce cart icon from the DIVI header on your WordPress site.

Login the WordPress admin area and under Divi >> Theme Settings, enter the following custom CSS:

.et-cart-info { display:none; }

Read More

Remove Description text in WooCommerce with Divi Theme

To remove the word "Description" from all product listing pages in WooCommerce with Divi.

Add this css code to Divi >> Theme Options >> General Panel >> Custom Css

 

.woocommerce-page div.product .woocommerce-tabs #tab-description h2:nth-child(1) {
display: none;
}

Read More

Remove the WooCommerce Breadcrumb tags with CSS

This simple CSS snippet is what you need to remove the WooCommerce breadcrumb text. 



.woocommerce .woocommerce-breadcrumb { display: none; }

Read More