Divi shop module

Divi shop module into dynamic product maps: When you create a landing page for specific products, whether it is a new launch or a sale you are preparing for, the chances are high that you will be using the divi Shop module at some point. Divi Shop module allows you to dynamically extract products from the WooCommerce plugin and style them using Divi’s built-in options.

Now by default, the divi shop module comes with a few column structures which all translate to two columns on smaller screen sizes. This means that the more products you choose to display, the more vertical scrolling is required to get to the next part of your landing page.

In modern web design, a technique often used to limit vertical scrolling and display elements according to your visitors’ preferences is to use magnetic cards. In this tutorial, we will show you how to transform the Divi store module into dynamic product maps on smaller screen sizes without using a plugin.

We’ll start by preparing the different elements of our product section and use a small amount of CSS code to activate the sweep effect. It’s a great way to show off a wide range of products on your landing page without overwhelming your visitors.

Divi shop module

1. Set up WooCommerce and product pages

Before entering the Divi part of this tutorial, the WooCommerce plugin must be installed and activated on your website. If you haven’t already done so, add multiple products, depending on the number of products you want to display in your Shop module.

2. Create a new page and download the layout of the stationery landing page

Create a new page

Once the products are in place, add a new page in your WordPress backend. Give your page a title, publish the page and activate the Divi Visual Builder.

Download the landing page layout

Once inside your new page, navigate to your preset layouts and download the stationery landing page layout. Although we use this specific layout, you are free to use any other layout you want, as long as you add or locate a store module inside this layout.

3. Edit the shop section

Locate the section with the Shop module

If we scroll down to our new page which we created using the stationery home page layout, we will come across a section with a shop module. We will use this section throughout the next steps of this tutorial.

Line parameters

Responsive sizing

Start by opening the row settings of the row containing the Shop module. As mentioned before, we keep the same design on the desktop, we will only activate the product’s swipe cards on smaller screen sizes.

To create an effortless experience, we’ll allow the row to touch the left and right sides of our screen by changing the width in the sizing settings.

  • Use custom gutter width: 1
  • Width: 80% (desktop), 100% (tablet and phone)

Visibility

We’ll also make sure nothing goes beyond the rows container by setting the visibility settings to hidden.

  • Horizontal overflow: hidden
  • Vertical overflow: hidden

Shop module parameters

Choose the number of products and the office column structure of your choice

Next, we will open the Shop module settings. The changes we make to our CSS code (which we’ll add later) depend on the number of products we’re showing.

We’ll start by showing you how to turn a shop module with 8 products into product cards. You can choose any column layout you want for the desktop.

  • Number of products: 8
  • Column layout: 4 columns

Responsive sizing

To increase the size of our shop module, we will be changing the sizing parameters in the design tab. Note that we are only doing this for the tablet and phone.

  • Width: 100% (desktop), 250% (tablet and phone)
  • Maximum width: 100% (desktop), 250% (tablet and phone)

CSS class

We will also add a CSS class to our store module. Later, when we add the CSS code, we can transform the Shop module which only carries this CSS class. In other words, if you want another Shop module to appear in a normal state, leaving out this CSS class will allow you to do so.

  • CSS class: product-swipe-cards

Reactive overflows

We will complement the line settings by changing the visibility settings on different screen sizes. As you can see in the settings, we only want the scrolling effect to occur on smaller screen sizes.

  • Horizontal overflow: hidden (desktop), scrolling (tablet and phone)
  • Vertical overflow: hidden

Add a code module under the Shop module

Once you have edited the Shop module, you can add a code module just below.

Add CSS code to the module

The following CSS code will automatically transform our shop module of 8 products into reactive magnetic cards:

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

Match different product accounts

Now, if you are looking to add fewer (or more) products to your store module, the code changes slightly in two places. Both of these locations must be changed manually to match the desired result. Let’s change the number of products in our shop module to ‘4’, for example.

  • Number of products: 4

When we come back to our code, we need to make two changes. First, we will need to modify the columns of the grid template. Instead of 8, we use 4 (the same number as our number of products). We are also increasing the percentage size that these products occupy in our product sheets (the more products, the less space).

Then we will also change the width of the container in which the products are placed. For 4 products, this equals 150%. These values ​​are not fixed, they are obtained by playing and finding a harmony between the columns of the grid model and the width of the container.

To find the right balance, switch to the mobile view inside Visual Builder and carefully adjust the values ​​while viewing the result of those changes.

width: 150%!important;

Add a scroll snap

If you want to take the user experience a step further in the design of your swipe card, you can also add a scroll snap. Scroll capture allows your visitors to scroll by staring at the start of a new product.

This means their scan does not need to be exact, the scroll slam will take over at some point and display adjusting its position inside the side scroll mechanism.

To enable scrolling capture on your product’s swipe cards, add a line of CSS code to each product individually in the CSS code (see print screen below).

scroll-snap-align: start

We will also enable scroll capture on our store module by adding the following line of CSS code:

scroll-snap-type: x mandatory

Reuse the workshop module to display other categories

Clone an entire row once

Once you have completed the first set of magnetic cards, you can clone the entire row once.

Remove code module in a duplicate row

As long as your store module contains the same CSS class as the previous one, a code module will do. Go ahead and remove the code module in your duplicate line.

Clone the duplicate row as much as you want

And clone the duplicate row now as many times as needed, depending on how many sets of magnetic cards you want to show on your landing page!

Read more: How to add the animated counter to scrolling on Divi

4. Save page changes and view results on a mobile device

Make sure that once you are done adding the product swipe cards, you save your page before exiting Visual Builder, and you are done!

Final thoughts on

In this article, we have shown you how to turn the integrated Divi Shop module into product magnetic cards on smaller screen sizes. On the desktop, we have kept the original column structure assigned to the Shop module.

Using product swipe maps allows you to add endless products to a horizontal swipe mechanism without overwhelming your vertical scrolling visitors.

This is a trend often used in modern website design because it focuses on user behavior and makes it easier to access a wide range of elements on smaller screens.

You can use these product sheets on any page, but it’s especially handy for any product landing pages you create.

 

For website maintenance service contact us.

Leave a comment

echo "";