Adding Add to Cart buttons to the repeater for the WooCommerce product archive in Oxygen Builder

in this video we're just going to have a look at the different buttons that you can use when it comes to your shop so we're going to refresh and now you'll see that we have the traditional add to cart or the buy now button now the buy now button is just a simple button that links to the permalink that will show you the product or we have the add to cart button from woocommerce and you'll see here that when it comes to products with variations it will allow us to then select options or on a group product view product so the way it works is i would add to basket and then the page would refresh and it would tell me that the item has been added to the market to the basket and the other one within here would allow me to select options i would then go through to that particular product select the options and add to cart so that's how the button works and it works far better than the buy now permalink button which just takes you through to the product so i'm going to head over to the website the buy now button that i have here we can remove and you'll see that in the coding it doesn't actually show within oxygen that that button so on the web page now you'll see that the buy now button is no longer there and we just have the add to cart button right and so you'll see that that coding doesn't show it's nothing is visible in the back end i'm going to go to that code block and show you the code so the code that we have there is this code over here and i'll make it available under the video and that basically just says check what kind of product it is if it's a simple product go to the product if it's not a simple product then redirect the person to the product page so that's the coding that we've used there and you simply paste that in and the button will be created so at the moment the button is coming through as the width of the text if we wanted to make that wider i haven't tried this before so i'm just going to set the width to 100 percent right and i'm going to save and then i'm just going to have a look and see if that then changes that button size to yes it does so by setting the width of the code block you will then set the width of the add to cart to change the color this is standard woocommerce colors so head over here to your website go to manage let's go to settings let's go to global styles let's go to woocommerce and let's have a look at buttons and then over here what should happen then is that if i change that to red then we should see a change here and there we have the red button so the secondary button options are the ones that have a look at the add to cart so the secondary click to action hover and i'll just make that then a deeper red and now you'll see that when i hover over that button it will then go from the current red to the much deeper red so that's how you can add the add to cart button so now if you have a look at the layout you can have your different buttons some for on sale some to show new and then your add to cart button now works as it should within the woocommerce framework so i hope you enjoyed that video and thank you for watching

Channel: Bruce Young

Views: 77

Keywords: Add to Cart in Repeater, Oxygen Builder

Id: bOuGPNrI13I

Length: 4min 3sec (243 seconds)

Published: Mon Dec 13 2021