Divi Theme – Frustrations with Woo Related Products Module Part 1

Hello all you beautiful people!

I’m trying to streamline my website design process, learning as I go along. Some things go very easy, others not so much. This is the not so easy side of developing our website.

The goal of any e-commerce website is to sell, sell, sell. Grab the buyer’s attention as soon as they land in your store and make a compelling argument why they should buy your product. They’re in your store and they’re yours to either convert or lose. I would like to convert as many people as possible, but I know from experience that I’m going to convert one shopper out of every 100 that visit IMTKeepsakes.com.

Once we have captured the buyer’s interest with the stunning photographs of our products, then we want to raise the ticket price by offering other related products that they may be interested in buying. To accomplish the task at hand we have a Woo Related Products module on each product page, and there are over 250 products so far.

The basic product page structure is in place, but I keep going back making improvements: adding background colors, rounding corners, adding borders and on and on and on. Oh, and by the way, optimize the site for cell phone users which are the majority of our viewers.

The easiest solution to upgrade existing product pages is to put two new Woo related products modules in the library; one for desktop view and another for cell phone view.

Build the Modules

I built the row on an existing page. The first module is the Woo product tabs which displays the description, shipping polices, and our personalization guide. The tabs are needed regardless of what type of device the shopper is using to browse. The second module is the Woo related products module. I make sure that the included categories are left unchecked to make this a generic module as the store has 5 different product groups. I open the row settings and click visibility under the advanced tab. I select disable on phone and tablet. I then save it to the library as “woo rel prod desktop” and select “unclassified” as the category.

The module for the cell phone view is nearly identical to the desktop module except for a couple of tweaks: Under the content tab in the module, I make the product count 4 instead of 3. Then on the row settings I disable the visibility on the desktop, making it visible on a tablet or phone. The row is then saved to library as “woo rel prod phone” and select unclassified as the category.

Editing the Listings

Now begins the arduous task of rebuilding 257 listings. The easiest way that I’ve found to do this is from the products page on the back end for all products. I right click edit for the product and open in a new tab. I do this for several items as I’m going to have to wait for the page to load before I can edit anyways. This way, by the time that I’ve opened the tenth tab, the first is ready to edit. The editing can be done on either the front or back end. I delete the current row with the Woo related products, select the green + to add a new and “add from library”. I select the uncategorized category and select the “woo rel prod desktop” module and add it to the page. I do this again for the phone view.

Customize the Modules

I can now click on the gear for desktop module and select the category for this product type. Once I do this, I can now save it in the library to use for products with a similar category. I save it as “romance woo rel prod desktop” and create a category called romance in the library and save it. I do the same for phone view.

To view the results, click update and view the product on the front end. Depending on what type of device I’m on I’ll either see the desktop view or the phone view. I can see both views by enabling visual builder. If I’m on the desktop, the phone view will be visible but greyed out. If I click the purple circle on the bottom, I’m able to switch to cell phone view, tablet view, or back to desktop view.

The Problem

Looking at the cell phone view in the front-end visual builder I see that the related products (which I set up as a count of 4) is showing 3 related products: 2 on the first row and one below to the left. Where’s the fourth related product? Edit the settings on the module and it’s showing as a product count of 3 not 4. If I change it to a product count of 4 and save it shows the 4 related products in the cell phone view. This only corrects the view on that product and does not affect a global fix.

The Solution

I handed the problem off to my Guru Jeff at Zeus Digital. Once we figure out a solution, we’ll update you here. 

The Take-Away

Thoroughly view and test all aspects of your edits before adding it to a hundred pages. Work smart not hard my beautiful people!