If you are using Divi, using the new WordPress Gutenberg Editor makes little sense. Use the following snippet in the “functions.php” of your active theme to disable it. The classic Divi Backend Builder will then be available to you:

add_filter( 'use_block_editor_for_post', '__return_false' );

After downloading “Divi – Awesome Woo Products”, you can install it manually just like any other plugin. Once activated, there are 2 ways to activate “Divi – Awesome Woo products” on your site:

1. Activate Globally – This is done on the tab of the WooCommerce settings for products. This option is for you, if you started with a new shop or you have already customized all existing products and you want to activate “Divi – Awesome Woo Products” for all future products globally.
2. Activation on a subscription basis – You can do this by placing a check mark on “Enable Pagebuilder” in the upper right corner of the products page. Then update or publish the page. After the page has been reloaded, you can activate the page builder as usual. This is the recommended route for existing shops. This way you can edit all your products one by one until all products are customized. Then you can switch on the global settings.

[vryn_layout_shortcode id=”13936″]

If the page builder is active, there are some settings that change the behaviour of a product page:

1. Disable Stock: If a check mark is set here, the default stock message is deactivated. Then you can insert it with the module or the shortcode “[[dawp-stock]]” where it should be displayed.
2. Disable Related: If a check box is set here, the default related and upsell products are deactivated. Then you can insert them with the modules or the shortcode “[[dawp-related]]” or “[[dawp-upsell]]” where they should be displayed.
3. Disable Gallery: If this option is checked, the default gallery is deactivated. Then you can insert it with the module or the shortcode “[[dawp-gallery]]” where it should be displayed.
4. Disable Tabs: If a checkbox is set here, the default tabs are deactivated. Then you can insert it with the module or the short code “[[dawp-tabs]]” where it should be displayed.

[vryn_layout_shortcode id=”13948″]

Or you can simply turn them off globally. These settings are recommended for new stores or when all your products have been completely reworked. If you activate these settings, but still have the default layout turned on, your pages will break and be displayed incorrectly.

[vryn_layout_shortcode id=”13952″]

Here you can see the different steps to create a product:

[vryn_layout_shortcode id=”13967″]

These modules can be used to build your awesome products:

• Woo Add to Cart
• Woo Breadcrumb
• Woo Enqueue Sharing
• Woo Image Gallery
• Woo Meta Tags
• Woo Product Price
• Woo Product Rating
• Woo Product Tabs
• Woo Product Title
• Woo Related Products
• Woo Sale Flash
• Woo Stock Message
• Woo Upsell Products

Step by step instructions in a video series. *Please note that after clicking on one of these links, the videos will open in a new tab on YouTube.

01 – “Divi – Awesome Woo Products” – Say hello

02 – “Divi – Awesome Woo Products” – Install and activate

03 – “Divi – Awesome Woo Products” – Enable globally or on post basis

04 – “Divi – Awesome Woo Products” – Rebuild the cache on product pages

05 – “Divi – Awesome Woo Products” – Description tab

06 – “Divi – Awesome Woo Products” – Settings to disable

07 – “Divi – Awesome Woo Products” – Insert modules

08 – “Divi – Awesome Woo Products” – Insert shortcodes

09 – “Divi – Awesome Woo Products” – Divi & Extra compatibility

10 – “Divi – Awesome Woo Products” – Work with preview

11 – “Divi – Awesome Woo Products” – Adjust modules

12 – “Divi – Awesome Woo Products” – Create a product

13 – “Divi – Awesome Woo Products” – Work with library

14 – “Divi – Awesome Woo Products” – Rebuild the cache in library

15 – “Divi – Awesome Woo Products” – Role Editor

16 – “Divi – Awesome Woo Products” – Update plugin

17 – “Divi – Awesome Woo Products” – Delete plugin

You can style your modules and shortcodes in different ways:

The modules can be styled via the various module settings and the custom CSS tabs. On the other hand, the modules and the shortcodes can be styled over your normal custom CSS file.

Furthermore, you can easily create the following two files in your child theme. These are automatically recognized and inserted by the system only on the product pages:

1. your-childtheme/css/dawp-product-custom.css
2. your-childtheme/css/dawp-product-custom-min.css

The first file is inserted while the debug mode is activated. The second file is used when the debug mode is disabled. In the second file you should add the optimized (minified) styles from the first file. Here is a service where you can optimize your CSS code: CSS Compressor

You can download the demo pack by clicking on the following link: Demo Pack

This hooks are available:

Quantity button color and background-color

// /divi-awesome-woo-products/includes/controller/enqueue.php

'Color:'            'dawp_but_col'
'Color Hover:'      'dawp_but_col_hov'
'Background:'       'dawp_button_bg'
'Background Hover:' 'dawp_button_bg_hov'

// Examples
add_filter( 'dawp_but_col', function()
{

  return '#ffffff';

});

add_filter( 'dawpButBg', function()
{

  return 'rgba(255,255,255,.7)';

});

Here are some useful CSS snippets:

Stock message

.woocommerce div.product .woo-stock .stock
{
    background-color: #87a07c;
    color: #f9f9f9;
    padding: 5px;
}

.woocommerce div.product .woo-stock .stock.out-of-stock
{
    background-color: #9c6161;
}

Quantity field

.woocommerce div.product form.cart div.quantity,
.woocommerce-page div.product form.cart div.quantity
{
    box-shadow: inset 0 0 3px 1px #576270;
    max-height: 52px;
}

.woocommerce .quantity input.qty,
.woocommerce-page .quantity input.qty
{
    background: transparent !important;
    color: #576270 !important;
}

Does “Divi – Awesome Woo Products” work together with other extensions?

“Divi – Awesome Woo Products” has been tested with the following plugins and seems to work well with them. If you find any mistakes, please contact us. We are strongly interested in constantly improving the compatibility as far as this is possible and the extensions meet the general coding standard.

• WooCommerce Gravity Forms Product Add-Ons
• WooCommerce Subscriptions
• WooCommerce Bookings
• WooCommerce Product Add-ons
• WooCommerce Product Enquiry Form
• WooCommerce Tab Manager

I use product extensions. Do they work together with “Divi – Awesome Woo Products”?

Our plugin has been extensively tested. However, we can not guarantee compatibility with all other extensions. But we are keen to expand our plugin to provide the greatest possible compatibility. If you find a fault, please let us know immediately. We will then do our very best to establish the compatibility for you. If necessary also in own shortcodes and modules. Your satisfaction is important and dear to us.

Can I use the Divi Visual Pagebuilder?

No, not at the moment. Unfortunately, third-party plugins are not supported from Divi for the Visual Builder. However, you have an expanded preview mode. Just make your changes in the backend, then make sure that DAWP Preview is green in the toolbar by clicking on it. Then use the preview as usual by pressing the preview button. It will then load the complete web page with all changes in the preview window without saving this changes to the frontend.

If DAWP Preview is inactive (red), then only the respective section will be displayed, as you are used to  the standard modules. If you have many modules inserted, this can help improve performance. This ensures a speedy workflow with the best possible user experience for you.

My Variation Product is displayed as unavailable

Your variation product is still available, but it is shown to you that it is not available? If this message is displayed: This product is currently out of stock and unavailable, then you can try the following:

Please make sure that under the tab “Inventory” no checkmark for “Manage Stock?” is set. “ManageStock?” should only be activated within the variations itself.

Then go to the product index and open “Quickedit” for the respective products. Just click “Update” without making any changes. This ensures that the products are re-synchronized.

Updating the product takes a long time

Once you use many modules, this is a normal behavior for the Divi Builder. This has nothing to do with “Divi – Awesome Woo Products”. Just test it on a normal posting page. There you will have the same experience.

“Divi – Awesome Woo Products” is just a link between WooCommerce and the Divi Builder. It is programmed to be object-oriented, so that the different elements are only used where they are really needed.