FREE Product Page Template for Divi\u2019s Clothing Store Layout Pack<\/a>.<\/strong><\/p>\n
<\/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- Divi<\/li>\n
- Theme Builder<\/li>\n
- Portability<\/li>\n
- Import<\/li>\n
- Select your file<\/li>\n
- Import Divi Theme Builder Templates<\/li>\n
- Save<\/li>\n<\/ol>\n
What the Woo Notice Module Does<\/h2>\n
<\/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
<\/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
<\/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
<\/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
<\/p>\n
Once the product is added to the cart, the module appears.<\/p>\n
Add the Woo Notice Module<\/h2>\n
<\/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>\nWhere to Place the Woo Notice Module<\/h2>\n
<\/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
<\/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
<\/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
<\/p>\n
First, make the background white.<\/p>\n
Design Tab<\/h3>\n
<\/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\n- Title Font: Didact Gothic<\/li>\n
- Color: Black<\/li>\n
- Line Height: 2em<\/li>\n<\/ul>\n
Button Styles<\/h3>\n
<\/p>\n
Scroll down to the button and enable Custom Styles<\/strong>. Set the text size to 12px. For the desktop options, set the text color to white and the background to black.<\/p>\n\n- Use Button: Yes<\/li>\n
- Text Size: 12px<\/li>\n
- Text Color: #ffffff<\/li>\n
- Background Color: #000000<\/li>\n<\/ul>\n
<\/p>\n
Choose the Hover Options<\/strong> and set the text color to black and the background color to #f8ded5.<\/p>\n\n- Hover Text Color: #000000<\/li>\n
- Hover Background Color: #f8ded5<\/li>\n<\/ul>\n
<\/p>\n
Set the Border Width<\/strong> and Radius<\/strong> to 0px, the Letter Spacing<\/strong> to 3px, the Font Weight<\/strong> to Bold, and the Font Style<\/strong> to TT.<\/p>\n\n- Border Width: 0px<\/li>\n
- Border Radius: 0px<\/li>\n
- Letter Spacing: 3px<\/li>\n
- Font Weight: Bold<\/li>\n
- Font Style: TT<\/li>\n<\/ul>\n
<\/p>\n
Select to show the Button Icon<\/strong>, choose a right arrow, and choose to only show the arrow on hover.<\/p>\n\n- Show Button Icon: Yes<\/li>\n
- Icon: Small Right Arrow<\/li>\n
- Only Show Icon on Hover for Button: Yes<\/li>\n<\/ul>\n
<\/p>\n
Next, we\u2019ll need to add some Button Padding<\/strong> to give it some space around the text. Add 15px to the Top and Bottom, and 30px to the Left and Right. Note, this is not the padding for the module. We\u2019ll add that in a minute.<\/p>\n\n- Button Padding: 15px (Top, Bottom), 30px (Left, Right)<\/li>\n<\/ul>\n
<\/p>\n
Scroll down to Spacing<\/strong>. Add 0em Margin on all sides and 15px Padding on all sides. These are the default settings. Close your settings.<\/p>\n\n- Margin: 0em (all sides)<\/li>\n
- Padding: 15px (all sides)<\/li>\n<\/ul>\n
Row Settings<\/h3>\n
<\/p>\n
Next, we need to make some adjustments to the Row settings<\/strong>. Open the settings and select the Design<\/strong> tab. Choose to Use Custom Gutter Width<\/strong>. Set the Gutter Width to 1 and the Width to 94%.<\/p>\n\n- Use Custom Gutter Width: Yes<\/li>\n
- Gutter Width: 1<\/li>\n
- Width: 94%<\/li>\n<\/ul>\n
<\/p>\n
Finally, scroll down to Spacing<\/strong> and add 20px padding<\/strong> to the Top and 10px to the Bottom. Close the settings and save your work.<\/p>\n\n- Padding: 20px Top, 10px Bottom<\/li>\n<\/ul>\n
Another Custom Style for the Woo Notice Module<\/h2>\n
<\/p>\n
Next, let\u2019s add and style a Woo Notice module from scratch. For this one, we\u2019ll delete the original and add our own. Click the gray plus icon<\/strong>, search for Woo Notice<\/strong>, and add it to the top Row under the Woo Breadcrumbs module. To design this one, we\u2019ll use ideas from the layout. We\u2019ll use the same Row as the original, so its settings are the same as the previous example.<\/p>\n
<\/p>\n
In the Woo Notice settings, scroll down to the Background<\/strong> settings and choose Gradient<\/strong>. Set the first color to white and the second color to #f8ded5. The Gradient Direction should be set to 90deg, and the Start and End positions set to 50%. This will give it a color design that\u2019s the mirror of the Product section.<\/p>\n\n- First Gradient: #ffffff<\/li>\n
- Second Gradient: #f8ded5<\/li>\n
- Gradient Direction: 90deg<\/li>\n
- Start Position: 50%<\/li>\n
- End Position: 50%<\/li>\n<\/ul>\n
Design Tab<\/h3>\n
<\/p>\n
Next, select the Design<\/strong> tab and choose Didact Gothic<\/strong> for the Title Font. Make the font black, the desktop size 20px, the phone size 15px, and the Line Height 2em.<\/p>\n\n- Title Font: Didact Gothic<\/li>\n
- Color: #000000<\/li>\n
- Text Size: 20px (15px for Phone)<\/li>\n
- Line Height: 2em<\/li>\n<\/ul>\n
Button Styles<\/h3>\n
<\/p>\n
Scroll down to the button and select Use Custom Styles<\/strong>. Set the Text Size to 12px for desktop and the phone Text Size to 10px. For the desktop options, set the text color to black and the background to #f7eee8.<\/p>\n\n- Use Custom Styles for Button: Yes<\/li>\n
- Text Size: 12px (10px for Phone)<\/li>\n
- Text Color: #000000<\/li>\n
- Background Color: #f7eee8<\/li>\n<\/ul>\n
<\/p>\n
Choose the Hover Option<\/strong> for the Background<\/strong> color and set it to #d8dad5.<\/p>\n\n- Hover Background Color: #d8dad5<\/li>\n<\/ul>\n
Border<\/h3>\n
<\/p>\n
Set the Border Width<\/strong> to 1px, the Radius<\/strong> to 30px, the Letter Spacing<\/strong> to 3px, the Font Weight<\/strong> to Bold, and the Font Style<\/strong> to TT. Leave the Button Icon<\/strong> settings at default. This will show the icon on hover and include the default right arrow.<\/p>\n\n- Border Width: 1px<\/li>\n
- Border Radius: 30px<\/li>\n
- Letter Spacing: 3px<\/li>\n
- Font Weight: Bold<\/li>\n
- Font Style: TT<\/li>\n
- Show Button Icon: Yes<\/li>\n
- Icon: Small Right Arrow<\/li>\n
- Only Show Icon on Hover for Button: Yes<\/li>\n<\/ul>\n
<\/p>\n
Next, we\u2019ll need to add some Button Padding<\/strong> to increase the size of the button around the button\u2019s text. Add 15px to the Top and Bottom, and 30px to the Left and Right.<\/p>\n\n- Button Padding: 15px (Top, Bottom), 30px (Left, Right)<\/li>\n<\/ul>\n
<\/p>\n
Finally, scroll down to Border<\/strong>. Add 40px to all sides. This gives us a rounded module that matches the design of the layout. Close your settings and save your work.<\/p>\n\n- Rounded Corner: 40px (all sides)<\/li>\n<\/ul>\n
Results<\/h2>\n
Here\u2019s how our Woo Notice module looks on both desktop and mobile.<\/p>\n
Woo Notice Module on Desktop<\/h3>\n
<\/p>\n
Woo Notice Module on Mobile<\/h3>\n
<\/p>\n
Ending Thoughts<\/h2>\n
That\u2019s our look at how to style and add a Woo notice module to your Divi Product page template. This module adds a lot of information for the user and the user will expect to see this information. This gives them the feedback they\u2019re expecting. They\u2019ll know instantly that a product was added to their cart, and they\u2019ll have an easy way to see their cart. This module is easy to use and should be included at the top of every WooCommerce Divi Product page template.<\/p>\n
We want to hear from you. Do you use the Woo Notice module in your Divi Product page templates? Let us know in the comments. <\/strong><\/p>\n\n<\/div>\n
[ad_2]
\n
Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"[ad_1] 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[529],"tags":[],"class_list":["post-811658","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/811658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/comments?post=811658"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/811658\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media?parent=811658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/categories?post=811658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/tags?post=811658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}