Divi Woocommerce Shop Page Layout

Posted onby admin

This page lists all the best woocommerce layouts for Divi. Our directory lists the largest collection of hand-picked layouts that have been designed by Divi designers and developers from around the world. This page is a collection of the best Divi woocommerce layouts that are available to download and use on your own Divi website. You can get 10% off Divi Theme here: how to create a custom shop page with the divi theme. With the new the t. Edit: The display option This has been moved to the Customizer section in the latest version. Appearance → Customize → WooCommerce → Product.

Description

Shop

Previously known as “WooCustomizer”

Are you tired of creating child themes or adding multiple plugins to customize your WooCommerce store?

WooCommerce offers a lot of action and filter hooks to further Customize WooCommerce… the only problem is, you need to add your own custom php code snippets to edit all the different WooCommerce elements.

Introducing StoreCustomizer, a free WooCommerce customizer plugin, and your answer to editing the WooCommerce store and product pages, cart and checkout pages and also your user account page.

StoreCustomizer Requires the WooCommerce Plugin to be active

StoreCustomizer DOES NOT override the WooCommerce templates, the plugin simply adds extra design options and advanced shop functionality to your existing WooCommerce pages which are designed by the theme you are using.

If something does not work, Get in contact and we’ll help as best we can.

StoreCustomizer Top Features

Add Login / Logout menu item to a selected WP/theme menu area
Add Product sales statistics for Admin users on the website front-end
Customize Shop & Product Pages by editing or removing elements
Edit font size and color for WooCommerce Shop & Product pages & Cart/Checkout elements
Customize the design of all store buttons for Shop & Product pages & Cart/Checkout pages
Edit ‘On Sale’ banners text and colors
Edit User Account tabs and tab content headings
Edit or Remove Product Page Tabs and edit tab headings
Add a ‘Continue Shopping’ button to your store product pages
Remove basic checkout fields on WooCommerce Checkout page
Add a ‘Back to Shop’ button to your cart page
Add “New Product” badges to products created within a specified number of days
Auto / Ajax Update Cart when amount is changed on cart page
Auto Update Cart when user edits product amounts
Edit Cart & Checkout buttons & add return to shop buttons
✅ Select the login redirect page or logout redirect page and edit the menu item text
‘Add To Cart’ Increments – Set Min & Max values for ‘Add To Cart’ inputs, plus the increment value
🔸 Plus lots more

StoreCustomizer is useful because

🔸 No more creating a child theme to add WooCommerce code snippets
🔸 Offers extra design options and functionlaity for WooCommerce that your theme doesn’t
🔸 All settings built into the WordPress Customizer so you can edit WooCommerce visually in a live environment
🔸 StoreCustomizer is built to be lightweight… adding only the code that is needed, when it’s needed
🔸 We offer dedicated support for those extra elements you need help with, even if StoreCustomizer can’t do it
🔸 Plus lots more

Fast & Intuitive

StoreCustomizer is built to be a fast & lightweight, easy to work with WooCommerce extension for customizing WooCommerce.

With all the settings built into the WordPress Customizer, you can enjoy editing your WooCommerce store visually in the live environment of the Customizer… See your changes happen as you edit.

StoreCustomizer only includes the code that is activated to ensure that StoreCustomizer is lightweight and fast.

Divi Woocommerce Shop Page Layout Free

StoreCustomizer does not exclude or offer half premium functionality to try get you to upgrade, all Pro features are standalone to the free version, to enhance WooCommerce even more!

User 5 Star Rating: This is by far in the top 3 of WP plugins, from all points of view: functionality, GUI, reliability, options… you name it. The only reason I don’t put it on the 1st place is because I just don’t know what other great plugins are out there but, on my personal book, this is definetely number one. For sure it’s worth every penny.

See if StoreCustomizer Pro offers what you want:

Below are the Premium features you’ll get with StoreCustomizer Pro to enhance WooCommerce even more, to help you increase sales and create a beautiful online eCommerce store.

**Included with StoreCustomizer Pro:**

🔸 Catalogue Mode for WooCommerce

Easily remove the ‘Add to Cart’ and Purchase functionality from your WooCommerce shop, turning your online store into a beautiful online WooCommerce catalogue.

Set WooCommerce Catalogue Mode for the time being, or leave it on permanently.

Apply Catalogue Mode settings to all WooCommerce products, only selected products, or only for users that are not logged in, prompting users to create an account and log in to purchase your store products.

Divi woocommerce shop page layout template

🔸 Product Quick View for WooCommerce

Let users browse quicker through your online WooCommerce store with Product Quick View for WooCommerce.

Give your users the option to quickly preview your products and easily ‘Add to Cart’, or browse the image gallery from within a quick view popup on your WooCommerce Shop page, or click through to the Product Single page after they’ve seen it all.

Product Quick View for WooCommerce offers a neat popup on Product and Category Shop pages, and comes with extra settings to configure the popup and make the Product Quick View popup suit your WooCommerce store design.

🔸 WooCommerce Ajax Product Search

Help users to browse through and find your WooCommerce products quicker with WooCommerce Ajax Search.

Add a simple Ajax Product Search anywhere using a shortcode, and configure the settings to display a prediction of your WooCommerce products when your users start typingin the Ajax Search bar.

Add multiple Ajax Search bars as widgets anywhere on your site, or simply click to add an Ajax Search to the top of your WooCommerce Shop page & configure the settings to fit your WooCommerce store design.

🔸 Menu Cart for WooCommerce

Your theme doesn’t offer a neat WooCommerce Menu Cart in the main navigation area?

Simply turn on Menu Cart for your WooCommerce store and select which menu you’d like to display a WooCommerce cart in, or add a Cart items anywhere using the Menu Cart shortcode.

Set the cart to display only on WooCommerce Shop pages or to only show if the cart contains products.

Your store shoppers can easily and quickly view their WooCommerce shopping cart with an optional drop down basket/mini cart, they can add or remove WooCommerce Cart products or checkout from the WooCommerce Menu Cart.

🔸 WooCommerce Custom Thank You Pages

The after purchase Thank You page for WooCommerce is a very powerful place to get your users to sign up to your newsletter, show how to use the products they’ve just bought, or to advertise other products you sell online that they might be interested in… They have just purchased something from you so they do already trust you and want your products.

You can choose to redirect your customer to your new default Custom WooCommerce Thank You page, redirect them to different Custom Thank You pages depending on the products they’ve just bought, or to different Custom Thank You pages depending how they purchased the products and what payment method they used on your WooCommerce store.

Build your own Custom Thank You pages for WooCommerce using the default Gutenberg editor, Elementor, Beaver Builder, SiteOrigin or any other page builder you choose.

🔸 HandHeld Menu Bar

StoreCustomizer Pro also offers a new, neat handheld (mobile) footer navigation bar to help your users easily navigate your products or website, or proceed to the cart or checkout pages, and aimed to help users convert better when browsing your website on mobile or tablet devices.

Easily include the StoreCustomizer Ajax Search functionality within this new mobile navigation bar, and give your users an even easier way to browse around your WooCommerce store.

Handheld Footer Bar comes with default WooCommerce page links and search bar functionality included, as well as the option to add your own custom links and change the design colors too.

🔸 Custom Product Badges

Do you want fancy badges for your WooCommerce Products?

The next Pro feature coming with StoreCustomizer is custom Product Badges for WooCommerce.

Layout

WooCommerce Product Badges will let you easily add great looking product badges to your WooCommerce shop and product pages, plus extra features to customize the badges to suit your online WooCommerce store.

Extra Pro Features include

🔸 Add new WooCommerce user Account tabs
🔸 WooCommerce Direct Checkout – Remove your store cart page and send customers straight to checkout, plus the option to include the cart on the checkout page.
🔸 Easily build your new Account Tabs using the Gutenberg editor, Elementor Page Builder, SiteOrigin Page Builder, Divi Builder or any other page builder of your choice
🔸 Add Plus & Minus increment buttons to the Product Single page ‘Add To Cart’ input

View StoreCustomizer Pro features & see videos on what each premium feature offers.

Translations

Translations currently available for StoreCustomizer:
– Dutch – (nl_NL)
– Italian – (it_IT)
– French – (fr_FR)
– Spanish – (es_ES)
– Swedish – (sv_SE)

We’re always needing new translations, so please contact us here if you are willing to help translate StoreCustomizer into a language that we don’t have yet.

Installation

Requirements

StoreCustomizer requires the WooCommerce plugin to be installed and active.

Divi Woocommerce Shop Page Layout

Installation

Installing StoreCustomizer can be done either by searching for “StoreCustomizer” via the Plugins > Add New screen in your WordPress dashboard, or by using the following steps:

  1. Download the plugin via WordPress.org
  2. Upload the ZIP file through the Plugins > Add New > Upload screen in your WordPress dashboard
  3. Activate the plugin through the Plugins menu in WordPress

Configuration – Free & Pro

Navigate to WooCommerce -> StoreCustomizer in your WordPress Dashboard.

The settings are self explanatory in the free version.

In the premium version, each tab has a setting to turn on the relevant Pro feature, once you turn the settings on, you will then be able to go further edit the settings in Customize -> StoreCustomizer.

FAQ

Will StoreCustomizer work with my theme?

It should ! But as themes can add their own CSS or templates which might affect StoreCustomizer from working perfectly… We’re here to help… Let us know if something doesn’t work and we’ll help you fix it.

Where are the StoreCustomizer settings?

All the settings for StoreCustomizer are built into the WordPress Customizer. Simply go to Appearance -> Customize -> StoreCustomizer and start editing.

Woocommerce

Does StoreCustomizer change my WooCommerce pages?

StoreCustomizer DOES NOT override or change the layout of your WooCommerce pages, your store pages are designed by the theme that you are using, StoreCustomizer only adds extra styling on top of the theme and only to the elements you choose to design.

Free vs Premium… How does StoreCustomizer work?

All of the core features offered in StoreCustomizer are completely free… These free features help you to customize and further design your WooCommerce store pages, this is the core focus of the StoreCustomizer plugin… To offer a great free product.

The StoreCustomizer Pro version offers only EXTRA store enhancing features such as turning the store into Catalogue Mode, adding a Menu Cart, building custom WooCommerce thank you pages, adding Ajax Search and more. WooCustomizer DOES NOT offer half of these features and then try to get you to upgrade, it simply advertises what is available in the Pro version to enhance your store, and we offer it all at a great price for all extra features.

Please contact us if something does not work on your site so that we can try and help.

I found a bug… What do I do?

Please contact us so we can post a fix and get it working for you.

Something doesn’t look right or is slightly out in the design?

This could be from the theme you’re using. Again, please contact us so we can post a fix or give you the CSS to fix it.

Why the name change?

We’ve found out we’re not really allowed to use the “Woo” prefix, so we’ve changed the name from “WooCustomizer” to the new name… “StoreCustomizer”… and that still describes exactly what the plugin does!

Reviews

Not used it to much at the moment as I have only just downloaded it recently. But seems to be a good plugin to have and use, not had any problems with it so far, hopefully it stays that way.

Description

After the plugin is activated, the Visual Builder displays a new tab called “Popup” in the Section Settings modal. In the “Popup” tab, you can turn a regular Section into a Popup!

It’s super simple, as you can see on the plugins Demo Page: divimode.com/divi-popup/demo

ℹ️ How it works

First, activate the plugin (no configuration needed!)

  1. Open up your Visual Builder and edit a Section – you’ll see a new “Popup” tab in the Section Settings.
  2. Toggle the option “This is a Popup” and set the “Popup ID” to something (e.g., “newsletter-optin“). Close the Section Settings.
  3. Add a Button Module somewhere else on the page and set the “Link URL” to your Popup ID, with a leading “#” hash (e.g. “#newsletter-optin“)
  4. That’s all. Save the page and exit the Visual Builder! Click on the button, and you’ll see your Popup. Congratulations!

⭐️ Additional details

Check out the Plugin website for more details. You’ll find:

  • Examples
  • CSS class options
  • JS API documentation
  • WP filter documentation

Tested in all major browsers on Windows and Mac: Chrome, Firefox, Safari, IE 11, Edge!

🎂 Popups for Divi turns 2

Wow, it’s already two years since the beginning of Popups for Divi!

It has been a great time and we’ve learned a lot. During that time we added a ton of features and have created a stable and powerful marketing plugin.

To celebrate the anniversary, we have created a six-day course that teaches you everything about the plugin. It walks you through the basics of creating your first Popup, shows possible ways to customize your Popup layouts and goes into advanced techniques and usages of the plugin.

“The instruction emails really helped me to understand how to use the plugin correctly!”

The course is available in your wp-admin Dashboard right after you install and activate the plugin. Check out the screenshots to see the form. Also, have a look in the FAQ section, if you want to disable this feature.

🥳 Want more?

If you want to get the most out of Divi, you need to have a look at Divi Areas Pro to get additional features:

  • An admin UI to create and configure your popups
  • Choose between 4 Area Types: Popup, Inline, Fly-in, Hover
  • A beautiful UI that blends in perfectly with Divi
  • Add advanced triggers to your Areas:
    • On click
    • On hover
    • On scroll
    • After delay
    • On Exit
  • Customize the Area Display
    • Show on certain pages
    • Show on certain devices
    • Show for certain user roles or guests
  • Customize Area Behavior
    • Show/Hide the Close button
    • Display the Area once per hour, day, week, …
  • Flexible position for Inline Areas
    • Replace/extend the page header
    • or Footer
    • or Comment section
    • or actually any Divi section inside the page content
  • It comes with an extended version of the JS API
  • Great documentation built into the plugin and an online knowledge base
  • and much more…

👉 Learn more about Divi Areas Pro (with screenshots!)

Installation

Install the plugin from the WordPress admin page “Plugins > Install”

or

  1. Upload popups-for-divi directory to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress

FAQ

How much performance does Popups for Divi need?

Actually none! We designed it with maximum page performance in mind. Our tests did show literally no change in page loading speed.

The plugin will add a single line of CSS to the page output and load two files that currently are only about 31 kb in size (9kb gzipped). Both files are cached by the browser and used on all other pages of your website.

Those two files are the JS API and the popup CSS rules that center the popup, dim the background, etc.

Divi Woocommerce Shop Page Layout Templates

Is Popups for Divi compatible with Caching plugins?

Yes, absolutely! There is no dynamic logic in the PHP code like other popup plugins have. Popups for Divi is a little bit of PHP but the main logic sits inside the small javascript library it provides. It works on the client-side and therefore is not restricted by caching plugins.

Is this plugin compatible with every Divi version?

This plugin is kept compatible with the latest Divi release.

We did test it with all releases since the initial Divi 3.0 release. Possibly it will also work with older versions

Does this plugin also work with other themes/site builders?

Yes, actually it will! But out of the box it is optimized to work with Divi 3.0 and later. If you use any other theme or site builder then you need to change the default options of the plugin via the evr_divi_popup-js_data filter.

For more details visit divimode.com/divi-popup

Does this plugin display any ads?

No. This plugin is free and does not display any ads. In fact, the plugin does not have a UI at all.

Popups for Divi is just that – a plain popup plugin, not our marketing strategy!

Since version 1.6.0 we now offer a six-day email course that shows you how the plugin works. You will see a notification in your wp-admin dashboard right after activating the plugin.

Do you collect any details from my website?

No, we do not collect or transmit any data from your website.

Since version 1.6.0 there is one exception: We now offer an email course that shows you how the plugin works. You will see a notification in your wp-admin dashboard right after activating the plugin. When you opt-in to receive the onboarding emails we will transmit the details you entered (your name and email address) to the plugin website to add you to our onboarding email-list.

Is there a way to hide the onboarding notice?

Yes, there is!

Since 1.6.0 the plugin offers an onboarding course that consists of 6 emails. We offer this course right after plugin activation in your wp-admin “Dashboard” page (nowhere else).

This onboarding notice is displayed to administrator users only. Once the user clicks on the “Dismiss” button, the message is never displayed again for them.

You can also globally disable the onboarding notice by defining the constant DISABLE_NAG_NOTICES in your wp-config.php or themes function.php

I need to revert to an older version

When you experience any problems with the plugin, I would love you to first head over to the support forum and briefly share your issue with me.

Here’s how you can revert to an older version of the plugin:

  1. Go to the Advanced View Page and scroll down to the bottom.
  2. Pick your version and click “Download” (you can choose any version since 1.5.1)
  3. Now go to your wp-admin Panel and open the Plugins list
  4. Deactivate and Delete the Popups for Divi plugin! Note: You will not lose any data, but while the plugin is deactivated/missing your Popups might be visible like normal page content.
  5. On the Plugins page click the “Add New” button in the top and then click on “Upload Plugin”
  6. Select the .zip file which you downloaded in Step 2 and upload it. Activate and you’re done!

Alternatively, you can replace the popups-for-divi folder via FTP: Extract the .zip file which you downloaded in Step 2 and upload it to your /wp-content/plugins folder.

I have more questions or need help

Please first visit the plugin website, as it includes examples and documentation that could answer your questions.

If that does not help, then head over to the support forum to see if someone else had the same problem and found a solution to it. Also, feel free to ask for help there.

You can also send us a private support request via the support form on divimode.com. Please note, that might need a while to answer your private support requests.

When you need additional features, then please have a look at our the Premium plugin Divi Areas Pro which comes with a lot of cool options!

Reviews

Well, finally DiviMode launches their freemium popup plugin for Divi. The free version works so well. I'm so happy with that. I highly recommended to others