{"id":811658,"date":"2022-01-29T16:00:28","date_gmt":"2022-01-29T16:00:28","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/non-classifiee\/how-to-add-a-woo-notice-module-to-your-divi-product-page-template\/"},"modified":"2022-01-29T16:00:28","modified_gmt":"2022-01-29T16:00:28","slug":"how-to-add-a-woo-notice-module-to-your-divi-product-page-template","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/how-to-add-a-woo-notice-module-to-your-divi-product-page-template\/","title":{"rendered":"How to Add a Woo Notice Module to Your Divi Product Page Template"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n

Confirmation and feedback are important elements to any eCommerce page. The user wants to know what happened after they clicked a button to purchase a product. They also want an easy way to see what\u2019s in their cart. The Divi Woo Notice module provides these exact features for your WooCommerce Product pages. In this article, we\u2019ll see how to style and add a Woo Notice module to your Divi Product page. We\u2019ll also discuss why you need one and the best location to add it.<\/p>\n

Let\u2019s get started.<\/p>\n

Preview<\/h2>\n

First, let\u2019s look at what we\u2019re going to build.<\/p>\n

Woo Notice Module on Desktop<\/h3>\n

\"Woo<\/p>\n

Woo Notice Module on Mobile<\/h3>\n

\"Woo<\/p>\n

Download Your WooCommerce Product Page Template<\/h2>\n

\"Download<\/p>\n

First, let\u2019s get a WooCommerce product page template for the Divi Theme Builder. You can build one from scratch or download one from the Elegant Themes blog. Search the blog for \u201cproduct page template\u201d and download the zipped file. I\u2019m using the FREE Product Page Template for Divi\u2019s Clothing Store Layout Pack<\/a>.<\/strong><\/p>\n

\"Download<\/p>\n

Next, unzip the file. To import it to the Divi Theme Builder, go to Divi<\/strong> > Theme Builder<\/strong> in the WordPress dashboard, select Portability<\/strong>, click the Import<\/strong> tab, navigate to and select your JSON file<\/strong>, and click Import Divi Theme Builder Templates<\/strong>. Save<\/strong> your settings. The file is automatically assigned to All Product Pages.<\/p>\n

    \n
  1. Divi<\/li>\n
  2. Theme Builder<\/li>\n
  3. Portability<\/li>\n
  4. Import<\/li>\n
  5. Select your file<\/li>\n
  6. Import Divi Theme Builder Templates<\/li>\n
  7. Save<\/li>\n<\/ol>\n

    What the Woo Notice Module Does<\/h2>\n

    \"What<\/p>\n

    The Woo Notice module does two important things:<\/p>\n

    1 \u2013 it provides feedback to the user that they\u2019ve successfully placed the item in their shopping cart.<\/p>\n

    2 \u2013 it provides a link to the shopping cart where they can view the items in their cart.<\/p>\n

    \"What<\/p>\n

    The Woo Notice module has options for the Woo Product pages, the Cart page, and the Checkout page. The second option shows the cart status and coupon information. The third shows a login field along with a coupon field. We\u2019ll use the first option \u2013 Product Page<\/strong>.<\/p>\n

    \"What<\/p>\n

    You can have it to display for the current product, the latest product, or any product you choose from the list.<\/p>\n

    \"What<\/p>\n

    Unlike other Woo modules, the Woo Notice module only displays on the page under certain conditions. It\u2019s only visible if the user adds the product to their cart. This example shows the product page when the product is not added to the cart.<\/p>\n

    \"What<\/p>\n

    Once the product is added to the cart, the module appears.<\/p>\n

    Add the Woo Notice Module<\/h2>\n

    \"Add<\/p>\n

    Like all Woo modules in the Divi Builder, the Woo Notice Module is only an option if you have WooCommerce installed. To add the module, click the gray plus icon<\/strong>, search for Woo Notice<\/strong>, and select the module. Many of the Divi Product page templates include the Woo Notice module.<\/p>\n

    Where to Place the Woo Notice Module<\/h2>\n

    \"Where<\/p>\n

    The best location for the Woo Notice module is at the top of the page<\/strong>, under the breadcrumbs. This will stand out to the user and it\u2019s the location they would expect to see this type of information.<\/p>\n

    \"Where<\/p>\n

    We can see in this wireframe view that the module is placed above the product\u2019s information.<\/p>\n

    How to Style the Woo Notice Module<\/h2>\n

    \"How<\/p>\n

    The template that I\u2019m using already has the module styled. We\u2019ll look at this styling in case you want to add your own, and then we\u2019ll also style it a different way using design queues from the layout pack and header and footer templates for the Clothing Store Layout Pack. It includes a button that changes color on hover.<\/p>\n

    \"How<\/p>\n

    First, make the background white.<\/p>\n

    Design Tab<\/h3>\n

    \"How<\/p>\n

    Choose the Design<\/strong> tab and select Didact Gothic<\/strong> for the Title Font. Make the font black and set the Line Height to 2em.<\/p>\n