HOW TO BUILD A WOOCOMMERCE WEBSITE IN OXYGEN BUILDER – PART 1



In this first part video, we’ll be covering:
– Using the Oxygen repeater element to build custom product cards for shop archive.
– Custom add to cart button in repeater
– display discount percent in repeater
– display sale badge in repeater
– Quick view
– product filters
– product sorting
– How to style element with no styling options
etc.

CHAPTERS
0:00 – Introduction
2:47 – Setting up plugins and snippets
10:37 – Setting up Oxygen Templates
14:30 – Building shop Archive page
28:44 – Adding custom Add to Cart button
30:37 – Adding custom Sales Badge
32:32 – Adding custom Discount Percent badge
33:20 – Styling components
51:22 – Add a Quick View component
57:33 – Styling the Quick View component
1:03:03 – Adding product filter
1:08:21 – Adding product sorting
1:10:10 – Styling Quick View modal
1:12:00 – Implementing ‘Add Again’ to add to cart button
1:13:00 – Adding ‘Out of Stock’ notice
1:16:37 – Making everything responsive
1:35:57 – Design review
1:36:33 – Next topic overview – Single product page

WATCH PART 2 HERE: https://youtu.be/4Hkew3n3Zis

Interested in OxyMade CSS Framework? check it out here:

Design sets & templates for Oxygen Builder

Link to CSS used in this video: https://pastebin.com/xsnz3Xev
Link to all Code Snippets used in this series: https://drive.google.com/file/d/1UFNVkJZkaymacjr7QDBPbrsAoK06wdw-/view?usp=sharing
Link to PHP code blocks used in this video: https://pastebin.com/LRkzKhh2

Love what I do? Buy me a coffee: https://www.paypal.me/udoro
Try Oxygen Builder: https://oxygenbuilder.com/try/​

source