Byline Product Order Made Easy

Exhibit byline template

hey everyone welcome back to conductor plugin calm going to show you an example today of adding WooCommerce products to the home page of any WordPress website see it in a widget area that goes into a sidebar or a shortcode that you can use on any Content area like a promoted home page or a promoted regular page to the home page so let's go ahead and take a look at that in action all right we're in the customizer of one of the most popular WordPress themes called zeref light made by the folks over at theme aisle and great theme they have a lot of sections here and within these sections you can customize things like the title area and add widgets into these areas so I'm going to use that as an example for this theme and I'm going to use this section here that is it's called their focus section and within these sections you can actually hide individual horizontal sections if you didn't want those areas but the great thing about it is you can change the title so I'm going to call this my products and keep in mind that all themes sort of react differently so you might not have these sections in your theme but what you want to look for is does my theme use a regular page that I can sort of put shortcodes in and type in other content or do they use side of our areas like this where I can drop in a widget and you'll see the little add widget section here that will reaffirm that you can use widgets in this section so go ahead and do that right now I'm going to use the conductor widget and we're going to just build out our display of e-commerce products I'm going to select many products and that's going to go ahead and scoop up all of our WooCommerce products you can see them all starting to be listed right here we're going to fine-tune that display so it looks a little bit better in this case I'm only going to show two just because sort of makes this particular theme look nice and clean so I'm going to switch that to two and I'm going to go down to the display settings and this is where the real magic happens so you can see here are my two but it's still all in one column because we're using the large display I'm going to switch this to a custom display I'm going to move the columns over to two so from one to two and I'll put them side-by-side you can still see here this is all the default WordPress content so we don't need any of that stuff we don't need the author byline we don't need content description and we don't need the standard read more link although that read more link would bring it to the product page what we want is all the commerce information so with the custom fields a non loaded up we can search right here for all of these WooCommerce meta fields and we will add the ad cart one and we will add the price you can see right here on the right hand side and the preview where it's all sort of coming together but we don't want the Add to Cart above the price we want it below the price so I'm just going to switch the price to this and we might actually change Add to Cart to buy now again this is always conductor plugin you can sort of customize this display you can drag and drop you can rearrange these fields and that'll make your WooCommerce products looks look great side by side you can have as many columns I mean up to six columns here all the times on how many products you want to display for might be another good number here and that'll have you can have four items if we switch this to show for now show for most recent WooCommerce products and you can add the styling so if you want to make it match a little bit closer to how the theme displays this theme uses a class called WooCommerce page I believe that's the class yeah so now the buttons look like the Buy Now buttons on their actual shop page and you can either adjust it directly to this CSS ID right here like if you wanted to write your own CSS for this particular CSS ID you could do that or you could apply some of the classes that your theme already comes with to make it look a little bit more like your theme and again that's a little more advanced otherwise you're good to go without adding the CSS classes or targeting the CSS ID so go doctor plug-in com using the WooCommerce add-on hope you enjoy it's conductor plugin comm slash contact if you have any questions see you in the next video