WooCommerce Product Page Customization - WooCommerce Tutorial, Astra Theme 2020
Вставка
- Опубліковано 2 лип 2024
- In this WooCommerce tutorial, we will customize our product page to make it cleaner and more minimalist.
You'll learn how to:
-Remove the breadcrumbs from the top of the page
-Remove SKU and remove category meta information
-Remove the additional information and review tabs from the description
-Remove review stars from WooCommerce product catalogue
The CSS to remove the product meta is here:
.product_meta {
display: none !important;
}
The CSS to remove the additional tabs is here:
.additional_information_tab {
display: none !important;
} - Наука та технологія
Thanks a lot
No stories about the uncle or the cat, Just right to the point... that's what a perfect tutorial should be like.. not a second waisted.
Thank you.
Loved the straight to point, no blabber. Just the right info I was looking for, keep it up ❤️
Thanks Vivek :)
Absolutely...!
Thank you so much. The only one I found talking about how to remove the categories tab in an easy and effective way!
Thanks Figlio 😊 glad I could help!
Thanks a lot
Awesome thanks for these tips!
Thank you very much, Great video
very useful thanks a lot !
Thank you! 🏆
Thanks very much😊
Your videos are super helpful!! :)
glad it helps!
Thanks man! Very helpful indeed.
Glad to hear it!
You sir, are a hero 🙏
Thanks Alex for a great video! Just wondering if you know of a way or a plugin or a way to hide prices based on "product category" until a user logs in?
Basically, my client has two kinds of products, one type (retail) he wants display prices to everyone and the 2nd type (Professional) products that he only wants to display prices if the users are logged in. Thanks!
Thanks for the video. I have added a custom taxonomy and would like to display under categories. Do you know how to do that? Thanks in advance.
How do i get the Size dropdown which you have used in this video?
Where do I find the breadcrumbs option? I don't have a Single Product section when I go to Customizing my theme.
awesome stuff. very helpful. your video helped me allot. thanks
Glad to hear it!
This is VERY succinct and has been extremely helpful, thank you. I was wondering if you can PLEASE help with something - on my product page, it has a click view option, but when I click it, it does not show the layout or product details, and it doesn't show the "add to cart" option, it only enlarges the picture. What can I do? Thanks for your time.
Luckily I realized before saving that disabling the breadcrumb makes my bookings disappear!. at least with the plugin I use...for wordpress....Is there a way to do this without that being affected?
Do you have a video about how to customize the width of the product page? I've been looking for the css code to do that with no success.
Great tutorial. However when you remove additional tab using your method, it is removed only when browsing on a computer. The additional tab still shows when browsing on mobile. Any help please?
thanks a lot
How do I change the colour of the product meta?
I have the issue that my thumbnail images are not the same size. What can i do to make them all the same size?
That was informative.
Questions revolving in my head:
Where do you get the CSS codes?
How Do you change the quantity count field?
How do add the red line that right above the Description tab?
I hope you answer whatever you can. Thanks!
Hay Idea Spot!
Can you please tell me how to change the background colour of the product page Please?
That would be really helpful!
Awesome video! Im having a problem with woocommerce Astra, the first 12 items show up normally, from there it goes into HUGE pictures, and no option for page 2, so lacking items, and the items after the first 12 is just insanely huge... Any idea on a fix? (3 rows of 4 items), i tried editing all ways, and rechecked all items are uploaded with same picture size and everything.
My newer video gives a much better method: ua-cam.com/video/JABZIx6wNv0/v-deo.html
Thank you, your videos are great. Do you have a video about customizing the shop page?
Thanks Gerardo, not yet - but I really like the WooLentor plugin for doing shop pages - wordpress.org/plugins/woolentor-addons/
Hey, Ive got 17 products but only 8 showing on the product page. How do I get them to show or how to add the rows please thanks
Love the video! I'm currently setting up products in woo-commerce and we are using Be theme, do you have any tutorials or a way to have a data table displayed below the price for the product page so the customer can see the specifications of the product?
Hi Richard, WooCommerce makes a product variation table plugin: woocommerce.com/products/product-variations-table-for-woocommerce/ and there are other similar plugins too.
If you just want to add a table of info to the product description you might just paste an html table (you could build it in the block builder with the table block first and paste the html into your product description using the text tab). Another way would be to just design a nice table with your favourite graphics software and save as a png and put that into your product description.
hey can do the same think with product categories
Thank you so much!
May i know if you have a code for just showing the SKU? And NOT the category or more - on the meta section i mean.
Your help means a lot from someone who like me who cant even write a code. Thanks in advance!❤️
thank youuu
This video is perfect - the information is brief and exactly what I was looking for. I do have a newbie question here - does hiding the meta data from the page affect SEO at all? Also, I am working on my first e-commerce site - it is almost complete. What should one prioritize do once a few products are on the site and the checkout page and payment gateway is setup? Any advise would be much appreciated.
Thanks in advance
Hi, I have a much more recent product page video, I'd recommend using this method instead: ua-cam.com/video/JABZIx6wNv0/v-deo.html - using 'display none' should be fine though its discussed here: www.quora.com/Will-using-display-none-hurt-SEO
Your next step should be making up good articles, reviews, videos to build organic traffic!
Hi bro, I need to add ''Buy on Shopee'' button next to ''Buy now'' button under the products. Such as that extra ''Paypal buy now'' button. Do you know how to do that?
great one thx. Any idea how we can fix the thumbnail? It does not match the size, unfortunately display option under woocom. settings is not there.
Hi Anura, from your dashboard, its under: appearance > customize > woocommerce > product images
There you can change the image size and aspect ratio (this is using Astra theme - it can vary between themes what features are available).
I'd recommend making any images you want to use in your product gallery the same aspect ratio, by default it uses square images and crops other images into a squares size. If you're trying to use a mix of image size ratios together, like square, landscape, portrait etc. then it can look broken.
The layout of the page and the sizes used on the page will be controlled by the theme, there is more info on theme editing here: docs.woocommerce.com/document/image-sizes-theme-developers/
How to add 'Included Tax' text under product price? Please help
I can't see the customize choice.
Thanks for this video. Do you know the best way to design a single product page for free. I'm on a tight budget but I don't like the look of the default product page.
Hi Ninja :)
For a single product, you can design whatever page you like in Elementor, then manually make an add to cart button with a link like this:
/?add-to-cart=123
(change 123 to whatever your product number is)
You can make this button send the shopper to the cart with the 'redirect to cart page after successful addition' in WooCommerce > Settings > Products > General:
guide is here:
docs.woocommerce.com/document/configuring-woocommerce-settings/#section-5
Good luck with your project ;)
Alex
hello
how can i increase the font size of the price?
thx
Nice content thanks men, wanna ask you do you know how to make different product over for every different product ? I want to make a landing page for every different product how to do that ? Thanks again
Sorry for the late reply! Cartflows plugin would work nicely, but it's a lot of work if you have a lot of products! good luck :D
I have a blog that started off as an ecommerce site with an average of 15 products on multiple category pages. This also means that each product when clicked would take visitors to a woocommerce generated page. I want to get rid of all those category pages and instead of having a page of a grid of products I want to just have those pages show up under SHOP. Whats the best way to get rid of the woocommerce generated pages? Thanks
It sounds theme related...it maybe possible to edit these in your customizer. But you could also display all your items using an elementor page and something like this: wordpress.org/plugins/woolentor-addons/
i have everything i want to show on my product page but the only problem i have is when i create a product with variables the variable drop down box shows up like normal but the text that identifies the drop down box is shown in white. the background i have is white. so you can't see the text that identifies the name of the variable box. so instead of it saying sizes it just shows the selections and you can't see the word size unless i highlight it with my mouse or look at source.
Hi, just change the text color with CSS. www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
good luck, Alex
Thank you
You're welcome
Great, How I can add Paypal (button or option ) on the product page the same as you have it.
thank you
Hi, I use the same theme. but my Woocommerce Atribute "SIZE" Option not appears. Can you show me how to setup the SIZE Option like yours.
Hi, you can add new product variations in the product settings: docs.woocommerce.com/document/variable-product/
Where did u find this codes ??? For css I can’t find it !!!!
in the description!
Hi, how can I have my products reviews visible? (I want to have them visible somewhere on the page without additional clicking on ireviews button)
Hi, maybe try the WooLentor plugin and you can design the product template like this.
@@IdeaSpot thanks for respond
can we move product description under add to cart button?
Maybe try the WooLentor plugin, you can really modify the product template a lot in that.
Hi , i just disable my related product.
and i want to create " comment section" in there.
its like, need name , email for doing comment.
and then you can comment.
how. thanks.
Hi Vandeo - there's a guide here: www.goldenoakwebdesign.com/blog/how-to-enable-reviews-comments-for-all-woocommerce-products-in-wordpress
good luck with your project ;)
Alex
Hi Ideaspot where I can ask you just like email or support group for asking about wordpress ?
Hi it’s best to post in here that way the answers help more people - ask anything you like 😀
code did not work for me
Yeah just remove the useless stuff keep the focus