site one products This is a topic that many people are looking for. khurak.net is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, khurak.net would like to introduce to you Display WooCommerce products on the homepage in WordPress . Following along are instructions in the video below:
“Everyone welcome back to conductor plugin calm going to show you an example today of of adding woocommerce products to the home page of any wordpress website. See it in 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 ” ..
Thank you for watching all the articles on the topic Display WooCommerce products on the homepage in WordPress . All shares of khurak.net are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
“Get the Conductor WooCommerce add-on here: https://conductorplugin.com/nnIn this video I ll show you how to add and customize WooCommerce product display for your WordPress website homepage.”,
WooCommerce, WordPress, Conductor plugin, Display WooCommerce products, WooCommerce products homepage, Customize WordPress websites