HomeРазвлеченияRelated VideosMore From: Rodolfo Melogli

How to Customize the WooCommerce Shop Page via PHP (#CustomizeWoo Ep.5)

281 ratings | 77345 views
To get access to all the resources mentioned in the video, please join us at http://businessbloomer.com/customize-shop-page-woocommerce/ To get instant access to all my other free WooCommerce resources, please visit http://businessbloomer.com/#row5 1) WooCommerce: What Is the "Loop" & Why Shop, Category and Tag Pages Are All the Same: This is one of the biggest problems for WooCommerce customizers. Why is the Shop page content not showing? What is the "loop"? Why do category pages behave like the Shop? Clarity here is the key to customizing the shop properly. 2) WooCommerce: Know What You Can Customize via the WC Settings: Sometimes you don't even need a snippet, and WooCommerce developers often forget about the easy settings. We'll spend a few minutes going through a demo site and play/comment. 3) WooCommerce: Shop Page Most Common Customizations: PHP is the way to go. Simple snippets can help you edit the number of columns, rows, products. PHP functions can help you remove the "sorting" dropdown and "showing 1 product" counter. You can add info to loop items, text, stock, weight, and whatever other custom fields products have. All of this, without overriding any WooCommerce templates! 4) WooCommerce: Introduction to Conditional Logic: In simple words, how can we apply our changes to the Shop page only, and not the Categories? Or how to apply changes to one category, and different changes to another? 5) Q&A: Ask me anything you like at the end (I love this part!)
Html code for embedding videos on your blog
Text Comments (106)
GrutBrushes (2 years ago)
What a great tutorial. I learned so much. I loved the examples you used too, every time I wondered how something might be done it turned out to be the next thing you explained. Thank you!
Rodolfo Melogli (2 years ago)
Wow, awesome, thank you so much!!!
kerub querubin (12 days ago)
how do you edit the html markups of hooks? For example, id like to add a class and id to the default sorting select html. This has been stuck in my head, sorry cant really find a good answer online.
kerub querubin (13 days ago)
okay i've done this before, but I just cant remove the sidebar on woocommerce hook. remove_action("woocommerce_sidebar", "woocommerce_get_sidebar", 10); Im not using a storefront theme, I am using twentyseventeen. Help?
Stone Mind (28 days ago)
Hi sir, Its really a great tutorial which not only remove my problem but also i learn a lot of new things. now I believe i can fully customize shop page. But I have a problem, can you help me to learn in Archive-product.php file. In Archive-product.php file here I write my bootstrap code if i want to responsive this page in my wish. Its show 3 product in computer and tablet screen size and show 1 product in phone screen size in one row. But i want to show my product 3 item in computer screen, 2 item in tablet item and 1 item in mobile screen. In shop page i also remove the blank space in right site where we implement widget and show our product in full page. Thank you advance.
Todd Muffoletto (2 months ago)
How do I remove the product count from the category and sub-category pages? Truly phenomenal tutorial
Massimo D'Ambrogio (3 months ago)
Thanks!
UPTITUDE (5 months ago)
nice tutorial, straight ot the point and very valuable!
Sergey Kondrashin (7 months ago)
Hello, I can not remove default sorting from shop page. I tried to use a snippet from your page, but it doesn't work for me( What can I do? Thank you
SupremeGamer (8 months ago)
how can i add saved money below add to cart
QuailStudio (8 months ago)
the code to add more products per pages doesn't work for me, I also tried the newest version of this code without any luck.
QuailStudio (8 months ago)
Rodolfo Melogli, hey no worries already figured it out, I forgot to add WooCommerce support for my custom theme. It's all good now
Rodolfo Melogli (8 months ago)
Hey there! This could depend on your theme. Try looking at its settings :)
Jos A (9 months ago)
Hi ! once again, very interesting, very useful, explained very well. Thanks.
Rodolfo Melogli (8 months ago)
Thanks Jos!
Tortilla (10 months ago)
Hi, how do I change what happens on product thumbnail hover
Rodolfo Melogli (8 months ago)
It depends. Maybe CSS?
Chanti (10 months ago)
Hello! Your videos are really helpfully, but for me there is one question left and I hope you can help me. If there is only one product in row, is it possible to put the text (price, add to cart) next to it? Like on the right or left site and not above? Thanks in advance ☺️
Rodolfo Melogli (8 months ago)
Thanks! Yes, this is possible, and this is the proof: https://businessbloomer.com/woocommerce-display-products-table/
Darko (11 months ago)
Wow thank you, this video taught me so much! This is exactly what I was looking for, you're a great teacher. Subbed.
Rodolfo Melogli (8 months ago)
Brilliant :)
MD Toufik Ahmed (1 year ago)
Wow, its really awesome Tutorial. I have 4 years experience on PHP but this tutorial is very helpful for me.
Rodolfo Melogli (8 months ago)
Brilliant :)
Robert Vargas (1 year ago)
Where exactly is the loop injecting the html? i found <ul class="products"> but where are the <li>? Great video btw!
Rodolfo Melogli (8 months ago)
Hey Rob! the <li> elements are generated via woocommerce\templates\content-product.php file
Miss Chic (1 year ago)
Hello Rodolfo, I am not an expert on html or otherwise but on the contrary, i'm just a landslide !!! My problem is that I can not see the product on the right page. I have renamed the Shop page in Collections and added subcategories like clothes, jerseys etc. and as I said earlier I can not see the dress product in the category Dresses how do I do it? I do not find Woocommerce tutorials in Italian :( can you help me? Thank you PS translation from Italian into English is done with Google
Miss Chic (1 year ago)
I have assigned the product to the category but it does not go where I should go to explain it better In the menu I have the Shop page (under Collections) on this page I have created 3 product categories: Clothing - Footwear - Accessories. Below each of these categories I have subcategories: Clothing -> Clothes etc. Footwear -> Boots etc When you public the product remains on Shop and creates confusion ... I do not like it How do I do it? P.S translated by Google
Rodolfo Melogli (1 year ago)
Hey Miss Chic :) ENG: Have you added the product to that specific category? ITA: Hai assegnato il prodotto alla categoria "Dresses"?
yea747 (1 year ago)
Hello Rodolfo. Thank you for that interesting video! I have a serious issue. I have installed my woo commerce store in a theme. The issue is that i never see a pathway when someone browse my store. Example: you start Home, than apparel, than T-shirt. You should see on shop pages Home > apparel > Tshirts. Well I don't see anything at all. How can I fix this ? Many thanks!
Rodolfo Melogli (1 year ago)
Hey there! Ask your theme developers :)
Raj Sekar (1 year ago)
this video saved my life, one more important thing is I want to display the products in a table I mean, product image-title-price-add to cart in single line, can you please share the video/article for the same?
Rodolfo Melogli (1 year ago)
Thank you :) This resource of mine should help: https://businessbloomer.com/woocommerce-display-products-table/
Ehtasham Ali (1 year ago)
Very helpfull tutorial. But I have an problem for making shop page as a fullwidth. I place the below code in functions.php // Override theme default specification for product # per row function loop_columns() { return 5; // 5 products per row } add_filter('loop_shop_columns', 'loop_columns', 999); but it does't work
Rodolfo Melogli (1 year ago)
Hey there :) It could be your theme is already overriding that function - try asking the developers
Shakib Hossain (1 year ago)
Hi, I am using a custom html template. I converted it to Wordpress CMS and then installed woocommerce plugin. Everything works fine but I want to change the default shop page layout. In what way should it be done? My problem is similar to this. https://stackoverflow.com/questions/37407888/woocommerce-shop-page-custom-template Should I override the default archive-products.php? Thanks in advance.
Rodolfo Melogli (1 year ago)
I don't know, it really depends on the project specifications :(
Maheer Mannan (1 year ago)
hey rodolfo! great tutorial! i just wanted to ask if i cant find the custom fields option can i put in an attribute and link it to the functions.php?
Rodolfo Melogli (1 year ago)
Sure, I guess you can do that :)
FeedbackFallacies (1 year ago)
great job! thx!
Rodolfo Melogli (1 year ago)
:)
I want an image in a product addon. So you can order with the product an extra accessory, but I want to display an image of the accessory. How can I find the hook? Already installed a addon plugin which only shows a description...
Rodolfo Melogli (1 year ago)
Not sure - ask the plugin devs :)
Priya Singh (1 year ago)
Hi Rodolfo, Could you please help me with the shop page display. I dont want any product images on the shop page , all i want to display is a grid of products with Title, Price and add to cart button( add to cart text from the button to be changed to Book now). I am comparatively new to woocommerce and am unable to find any resolution to this. Please Help.
Rodolfo Melogli (1 year ago)
This article I wrote should help: https://businessbloomer.com/woocommerce-display-products-table/ :)
Yaron Rosen (1 year ago)
the conditional logic is exactly what i needed!!! thank you so much!!!!!!
Rodolfo Melogli (1 year ago)
Excellent, thanks Yaron!
hugh lang (1 year ago)
can you please tell me how to get to the templattes
Rodolfo Melogli (1 year ago)
Hey Hugh, thanks for your comment! Which templates are you referring to?
paras jaiswal (1 year ago)
hello sir, I usually watch your tutorials to learn woocommerce cutomization. I just want to know how should I remove sidebars and display products of shop page in full widht. please! guide me for this. Thank you
Rodolfo Melogli (1 year ago)
Hey Paras, thanks for your comment! This will strictly depend on the theme you're using - try asking their support team :)
Alijafar Kasim (1 year ago)
how can i sort my products by views on woocommerce
Rodolfo Melogli (1 year ago)
Hey Alijafar, thanks for your comment! Sorry but this is custom work and cannot provide a complimentary fix here on YT. Thanks for your understanding!
TheSec09 (1 year ago)
Hello! Is there a way to widen the table with products on cart page? As is shown here https://www.dropbox.com/s/jhx0pxzljpxssnm/Checkout%20page_2.JPG?dl=0 the columns are small and the text is displayed on many rows.
TheSec09 (1 year ago)
Hello! thank your for your response. Unfortunately I am not familiar with coding. All I can do is copy & paste and then verify the spelling and punctuation.
Rodolfo Melogli (1 year ago)
Hey TheSec09, thanks for your comment! Yes, you can do so with some CSS, are you familiar with that?
Sara Alba (1 year ago)
hey, this is amazing! i have a question. i also installed the subscriptions plug in, but the subscriptions are show in the same page and in the same <ul></ul> as the products.. is there a way to separate products from subscriptions? maybe a new page for the subscriptions?
Rodolfo Melogli (1 year ago)
Hey Sara, thanks so much for your comment! I would do the following: assign a product category to the subscription products, remove the shop page, and then use the [product_category category="subsscriptions"] shortcode to show them in their own section! Hope this helps!
Felix Bertil (2 years ago)
Great tutorial, thank you very much! Is that possible to study passing values from Advances Custom Fields Pro plugin? And let me one more question - how to rearrange woocommerce shop page layout to make it list view, and not grid view (by default).
Felix Bertil (1 year ago)
Hi Rodolfo! Yes, there are some number of plugins does exactly this - switching products archive page representation grid-list-slider view, but those are working with not all themes. Some themes will be ruined by such plugins. So, technically - maybe a better way to do rearrangement products archive page via function in child theme (as you popularize) rather than to inflate the list of plugins.
Rodolfo Melogli (1 year ago)
Hey Felix, thanks a lot! Yes, you can definitely pass ACF fields to Woo, you can check this different yet similar example on my blog: https://businessbloomer.com/woocommerce-show-product-custom-field-in-the-category-pages/ In relation to "rearranging" to list, there is a plugin that can do that, if you Google it you will find a few. Let me know!
Ryan Moran (2 years ago)
Exactly what I have been looking for, for about the past 3 hours! I would kiss you if you were near by ;) Thank you sir Cheers
Rodolfo Melogli (2 years ago)
Thank you Ryan!
Evelyn Mitchell (2 years ago)
How do we get the child page after our website is already partly built? Do we have to do everything all over again?
Rodolfo Melogli (2 years ago)
You're very welcome! Keep watching my tuts and hopefully something good will come out of them :)
Evelyn Mitchell (2 years ago)
Thank you for answering, and so quickly. I'm not actually new to this but I am very unskilled. Especially in the basics of how everything works under the hood, (in the core). I have gaps due to work and other obligations so building on what I learn involves a lot of relearning. Things change so quickly in software and computers that I'm constantly trying to catch up when I have the time to devote. Thank you for your tutorials they are a big help.
Rodolfo Melogli (2 years ago)
Good question Evelyn! As long as you haven't modified your theme's core files, adding a child theme is a 5-10 minutes job and nothing would happen to your existing site. You just might need to transfer theme options from one to the other once the child theme is activated. More info here: https://www.youtube.com/watch?v=kpcvm6BSQU0
Nick Berry (2 years ago)
Great video!! Your visual guides make development so much easier. Thank you! :)
Rodolfo Melogli (2 years ago)
Thanks a lot Nick, much appreciated!
Walter Mazzola (2 years ago)
Great video! I think you will love this plugin https://es.wordpress.org/plugins/simply-show-hooks/ It is useful to show hooks info in page.
Rodolfo Melogli (2 years ago)
Thank you Walter! I'm fully aware of the plugin, however I find it difficult to copy/paste and have a "WooCommerce-only" hook guide... this is why I created my own Visual Hook Guides for WooCommerce: https://businessbloomer.com/hooks :)
Faroek Nasierkhan (2 years ago)
After upgrading to newest version of theme I see the search box I had removed from my Home Page is back. Just want to take search box off Home Page only. Thank you.
Rodolfo Melogli (2 years ago)
Hey Faroek, thanks so much for your comment! Yes, this is possible - but unfortunately this is custom work and I cannot provide a complementary solution here on YT. Thanks a lot for your understanding! ~R
Mr.Thresher7 (2 years ago)
Hello Rodolfo...Excellent tutorials you've got here. Thank you for sharing your knowledge with us. Could you tell me if a plugin like Foogallery can be used with woocommerce to make custom product galleries on the shop page please ? I hate the default look. Can you put up a tutorial for this sometime ? Thank you kindly in advance. Cheers mate !~I~!
Mr.Thresher7 (2 years ago)
Sure, No worries...Will do bro..
Rodolfo Melogli (2 years ago)
Hey, thank you! I'm afraid I'm not familiar with Foogallery, maybe ask their developers :) Cheers!
Thanks for the tips. I ended up using a plugin and custom css to style, but doesn't give me everything I might want, so might go your route. Hey and what are you using for your cart menu plugin (in the far right, showing the nr of items and price)? I'm using one that I believe is literally called Woocommerce cart menu, but yours look like a different one, right?
Rodolfo Melogli (2 years ago)
:) Well, sorry, that's custom work and I cannot help here! Thanks for your understanding. ~R
+Rodolfo Melogli Ah! That explains it. And how about the quantity box and the + and - buttons on the side of it, on the product page? (I left a comment on your other video about how I could create that instead of the up/down arrows inside the quantity box that I have now). Thanks!
Rodolfo Melogli (2 years ago)
Ok, no problem! For the cart, I'm using Storefront theme (automatically has cart menu) plus PHP&CSS customization to add some styling :)
Yogeshwar Singh (2 years ago)
Very nice tutorial, I learned a lot of things, however I didn't get what I was looking for, I was looking forward to edit the current HTML inside WC loop, I know they in the plugins folder, but I want to edit them safely, so upgrading theme won't wipe out my changes. Can you make a tutorial on it?
Yogeshwar Singh (2 years ago)
I want to add my own class to every HTML tag I want to edit, inside the WC loop.
Rodolfo Melogli (2 years ago)
What exact HTML are you looking to customize?
Yogeshwar Singh (2 years ago)
You are downloading file off FileZilla, editing it in Notepad++ and uploading it via Filezilla; you could have simply used NPPFTP plugin in Notepad++ itself, so downloading, editing and uploading of file content will take place within Notepad++ itself.
Rodolfo Melogli (2 years ago)
Thanks for the tip!
Yogeshwar Singh (2 years ago)
That's Apr 2016 and you are still running Windows 7, and improve the resolution please, I am watching it at 480p and still can't see text clearly.
Rodolfo Melogli (2 years ago)
Thanks for the feedback - I like Win7 by the way, why change? :) You can switch resolution on the YouTube video to HD, let me know!
Juerjen (2 years ago)
Great video, thanks for the excellent explanation- already signed up for your newsletter ;-). I have one request for a video: How can I add a button next to "add to cart" which says: "Details" and links to the product page..?! Looking forward for more videos !
Rodolfo Melogli (2 years ago)
You can definitely target the button without adding extra classes. This is custom to your theme and website, so I suggest you hire someone on Fiverr for this simple fix. Let me know :)
Juerjen (2 years ago)
with very simple css, yes. but i dont know, where to put it (in style.css I guess, but dont know how to address this button), as i obviously wont be able to change that in the functions.php. If you could point me in the right direction, that would be great :)
Rodolfo Melogli (2 years ago)
You'll need some simple CSS - are you familiar with that? :)
Juerjen (2 years ago)
adding the additional button was easy, thanks to you tutorial. But now I've got one more question: How can position one button to the left and the other to the right, so that they dont touch each other? They are both aligned to the leftern side ;-/
Juerjen (2 years ago)
+Rodolfo Melogli awesome! thanks rodolfo, you make me wanna learn woocommerce!
vlad mircan (2 years ago)
Hey man! Using hooks is great for adding content but i wanted to change the text to make it appropriate for my country. Could that be done from these template files?
Rodolfo Melogli (2 years ago)
Excellent, thanks!
vlad mircan (2 years ago)
+Rodolfo Melogli I did now. Thanks a lot man you were of great help. Keep on the good work!
Rodolfo Melogli (2 years ago)
Hey Vlad, did you check this already: https://docs.woocommerce.com/document/woocommerce-localization?
Samir Haliru (2 years ago)
Excellent video!!!! It's so hard to find an up to date video guide these days. Thank you Rodolfo, and thank you also for spotting my archive-productS.php typo earlier :)
Rodolfo Melogli (2 years ago)
Thank you so much!!! :-)
Internet Cafe Tel Aviv (2 years ago)
i don't have this file (functions.php) in my folders in the theme... it's possible???
Rodolfo Melogli (2 years ago)
Thanks for your comment! Yes, this is possible, mostly if you're using a child theme (which you should anyways). You can add an empty functions.php to the theme folder, with the only requirement being "<?php" on line 1 (without double quotes). Let me know :)
Momo Schrei (2 years ago)
How can i change the number of columns displayed per row in the shop, in case of another display size?
Rodolfo Melogli (2 years ago)
Here you go: https://docs.woothemes.com/document/change-number-of-products-per-row/
Momo Schrei (2 years ago)
Or do you have a reference for that? :) Thanks for your help!
Print Perfect (2 years ago)
Very valuable info, Thanks a lot !
Rodolfo Melogli (2 years ago)
You're welcome! Thanks for your comment :)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.