Settings you may have missed in Divi BodyCommerce

Here are some cool features you may have missed

Divi BodyCommerce has grown so fast and with all the cool features and settings you all have asked for, we thought you may have missed some so wanted a place where we can showcase them off for you. Below is a list of things that you may have missed that you might be interested in. Let us know what you think!

We will add to this page as we go, so keep a look out!

Equal Height Grid Cards

Have you ever wanted all your products to be the same height or does it annoy you the way they are all different heights based on the short description or image? We have a solution for you!

When using our ARP Product Loop module. Make sure you have the custom layout enabled (not to be confused with custom loop) and in there you can enable the equal height grid cards setting. Once enabled, all your product cards will be the same height except for mobile (under 767px) where they will be the height they are, as they will stack on top of each other.

Divi WooCommerce Products Same Height

Change the name of “my account” menu item when the user is not logged in.

If you want to change the name of the “my account” menu item to be something else like “login” or similar, BodyCommerce can help!

Go to BodyCommerce Mods > General Mods. Once there scroll down till you see “My Account Menu Text Change”. Add the name you want the menu text to change to here. Then in the setting below this add a class name for the menu item you want to change.

To give your menu item this class name, go to the top of the screen and click on screen options, then check the box named “css classes”. Now add a custom css class to your menu item.

Change the name of "my account" when user is not logged in

Align last module in custom loop layout.

If you are using our ARP Product Loop module and have a custom loop layout, you can set the last module to be aligned to the bottom. This is useful if you have equal height product cards and want the add to cart button aligned at the bottom so they all line up with each other. Make sure you have equal height enabled and the last module in the loop layout as the add to cart module.

Flip product image on product loop.

When using a custom loop layout, you can set the thumbnail image to flip. Add the thumbnail module and under “image style” choose flip image. This can be used on any page where you have a loop such as the shop, category, tags, cart and product (related, upset) pages. The second image in the gallery will appear on hover.

WooCommerce Divi Flip Image

Custom Product Gallery Sliders

Have too many product images or want to make the gallery on the product page better? We have added the ability to choose from different product sliders. Our sliders have an improved image zoom, Lightbox and are compatible with variation image change upon selection.

Set Default Product Image

On some sites we have built, the client has been slow on delivering the product images and on a few we have actually gone live without having them all. This setting allows you to upload a default image that if there are no product images it will use – you could add the company logo or something a bit more playful with a custom message – either way it will look custom and more professional.

To do this, go to Divi Engine > BodyCommerce Mods > Global Mods. Under the “other general” sectio you can upload it there

Form Field Customizer

The form field customizer is a tool that allows you to change the appearance of your input fields across your WooCommerce site. This is particularly useful when changing the appearance of the quantity input in the Divi WooCommerce page. Our settings allow you to change this to something a bit more user-friendly. Read more about it here

Custom Loop Layout

This feature can really take your shop to the next level. Have you ever wanted to know how to create a custom category layout in the Divi theme? With the custom loop layout, you control the layout of each product in the loop. You define what modules you want such as the title, add to cart or ratings. This then gets replicated for each product and shows this. If you want a box shadow around each product “card” – simply use the Divi builder in the loop layout to do this. You can see in the following video how to use this unique feature.

Add Variation Product To Cart On Archive Pages

By default WooCommerce and Divi do not show the varations on the category/shop or any other archive page such as the search results page. If you have a simple product, you can add this to cart but not he variation. You need to click through to the product page to add to cart.

When using the custom loop layout mentioned above, you can do this with Divi BodyCommerce.

Simply add the “add to cart” module to the loop layout. In this module, enable the setting “Enable variation options on archive page”. This will display the select (or variation swatches if you are using them) on the archive pages to be added to cart.

variation add to cart category page Divi
variation add to cart category page Divi

One Page Checkout

Ever wanted the ability to have the cart contents on the checkout page so that your customers can edit it there without having to leave the page? BodyCommerce can help!

Head over to BodyCommerce > Checkout Page. Enable custom checkout layout and then make sure you have “Select Checkout Page Template” as “– Select –“, this will disable any custom checkout template you have created and use one that we have made. UnderCheckout Style, choose “One Page (cart and checkout)” – this will give this ability.

If you scroll right to the bottom of the page there are more options, you can change the number of columns so you can have the cart above or on the left – as well as make the payment option on the right or default

Limitations? Currently, you can only use this as our pre-made layouts and not on a custom one you do with our modules – we will look into this for the future.

One Page checkout Divi

Go Straight To Checkout

If you want to go straight to checkout and avoid the cart/basket page – we have a setting for you. Go to BodyCommerce Mods > Checkout Mods and enable “Go Straight to Checkout” setting. You need to disable Ajax add to cart, otherwise it won’t reload the page and therefore not go to the checkout page.

WooCommerce go straight to checkout

WooCommerce Admin Labels

Ever wanted to change the names of “WooCommerce” and “products” in your WordPress admin area?

We have you covered. Go to BodyCommerce Mods > Admin Mods and you will find some settings to change the labels and icons for the WooCommerce and Products titles.

WooCommerce admin labels

Cart shortcode in menu

Do you want to show your cart icon in a particular menu or are using the Divi Theme Builder menu module and our mini cart/cart icon is not working? You can now use our BodyCommerce cart shortcode and place it directly into a menu item.

Go to Appearance > Menus. Add a custom menu link. In the navigation label, add the shortcode and in the URL add “#”.

The shortcode to add is: bodycommerce_cart_icon. Add this text in between [] like the screenshot.

You can also find this shortcode in BodyCommerce Mods > Shortcodes

WooCommerce Cart Icon Shortcode

4 Comments

    • If I use this shortcode in the secondary menu I get two cart icons.
      What can I do wrong?

      • yes 2 cart icon same here, even after i checked Shortcode in menu?, still no differnt.
        also when i added the code in the builder i have the same result.

        Thanks

        • Anyone got a Solution about this?

Submit a Comment

Explore more from Divi Engine