Divi Tips
Divi Tips
More Divi Cumulative Layout Shift and other GTMetrix and Google Page Speed Tips
While there are many tips in my other post, this one is a bit more simple and more up to date. Do not use negative margins! Anywhere. If you absolutely need to move something, use the positioning tool instead. Make sure you check the tablet and...
How to make a Divi mega menu using Divi modules without buying a plugin.
There are a few Divi mega menu plugins out there and they work nicely for the most part. But, they can be pricey and some are a bit bulky. Using this method requires 2 things: Install the free "Shortcode in Menus" plugin for adding shortcodes to...
Divi Cumulative Layout Shift and other GTMetrix and Google Page Speed Tips
NOTE: Here is a link to my most recent post More Divi Cumulative Layout Shift and other GTMetrix and Google Page Speed Tips How to improve your Divi website Cumulative Layout Shift scores and other GTMetrix and Google Page Speed scores.While I was...
Make the default Divi search box search WooCommerce products only
If you have a Divi/WooCommerce site and you don't have any posts, this is perfect for you. The default Divi search will now search only your products. You can add this to the Divi theme options Integration tab in the head. Or add to a Code module...
Reduce the blog category featured image size in Divi
Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* reduce the blog category featured image size */ .archive.category .et_pb_post a img {max-height:300px; width:auto;} [/css]
Reduce the search result page featured image size
Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* reduce the search result image size so it doesnt fill screen */ .search-results .entry-featured-image-url img {max-height:300px; width:auto;}...
Swap Divi columns on mobile and tablet devices
Add the CSS class "flip" to any Divi row settings in the Advanced tab. Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* swap columns on mobile */ @media only screen and ( max-width: 980px) {...
Make default Divi header transparent on home page only
Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* make top nav bgd transparent on home page only */ .home #main-header, .home #top-header { background-color: rgba(255, 255, 255, 0) !important;...
Enlarge product image on rollover for Divi Shop module
Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* enlarge shop module product images on rollover BEGIN */ .et_shop_image img {transition: transform .2s;} .et_shop_image img:hover {transform:...
Hide or show WordPress menu items on mobile devices
In Appearance/Menus click on the Screen Options tab at the very top right. In the "Show advanced menu properties" area, check the box next to CSS Classes. Use the either "hide-mobile" or "show-mobile" in the menu class field. NOTE: The max-width is...
WooCommerce Tips
Add product SKUs to default WP search
How to enable products and other post types in Divi Search Module
Enable products and other post types in Divi Search Module
How to enable products and other post types in Divi Search Module
Hide the product weight and dimension on the WooCommerce single product page.
Hide the product weight and dimension on the WooCommerce single product page.
Add logo to WordPress admin login page
These are mostly for WooCommerce with a few for Divi and WordPress in general.
Replace WooCommerce category images with plain text.
Sometimes it's a pain to make images for all your WooCommerce product categories. Otherwise, you get the ugly default image. For example, see the image below where each category displays text only with a blue background.Add the CSS below to hide...
Make the default Divi search box search WooCommerce products only
If you have a Divi/WooCommerce site and you don't have any posts, this is perfect for you. The default Divi search will now search only your products. You can add this to the Divi theme options Integration tab in the head. Or add to a Code module...
How to add display Woocommerce product category on the order edit page
Add the following PHP code to your child theme functions.php file. [php] [/php]Add the following PHP code to your child theme functions.php file.[php] [/php]
Enlarge product image on rollover for Divi Shop module
Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* enlarge shop module product images on rollover BEGIN */ .et_shop_image img {transition: transform .2s;} .et_shop_image img:hover {transform:...
Change the default U.S. state in the dropdown on WooCommerce checkout page
Add the following PHP code to your child theme functions.php file. [php] //default checkout US state dropdown blank instead of the default site state making taxes sometimes show up add_filter( 'default_checkout_billing_state',...
How to Change In Stock text in WooCommerce
Add the following PHP code to your child theme functions.php file. [php] /* Change In Stock text in WooCommerce */ add_filter( 'woocommerce_get_availability', 'wcs_custom_get_availability', 1, 2); function wcs_custom_get_availability(...
