Target only single product pages with CSS in WooCommerce - css

With CSS I am basically hidding quatity fields in WooCommerce using display:none. But it removes quantity fields on Cart and Wishlist pages as well.
How can I only target single product pages?
I can do it by page ID as well but I have 100's of products and it's just not a practical way to do it.

To target Woocommerce Single product page just use the <body> class single-product.
Like for example to hide quantity fields (only on single product pages):
.single-product .quantity {
display:none;
}

Related

How do i add an html element for a single category in woocommerce?

I would like to know how to add an html element in header for a single category page with woocommerce. The other categories are not concerned

How to add front product page image upload and note textarea box in shopify

I need same like this website https://gopupsocks.com/product/custom-breast-cancer-fighter-socks/
How can I do it product page and cart page?
You can Google Shopify Documentation for two easy recipes to follow:
Line Item Properties (for the product pages)
Cart Notes and Attributes (for cart page and/or other places)
In both cases, you can use those to store any extra information you may want
Note that due to a quirk in Shopify, you won't have a cart to work with until the customer plays with the cart, or you use code to add/delete and item in the cart without them knowing. So be careful when trying the cart attributes out on the front page.

WooCommerce - Deleting the upper price on the product page with variations

I would need to delete the price above the variations, under the product title, but ONLY in the product page, not on the main store page. I was not able to accomplish this. Is this possible with custom code?
Many thanks.
Use css to hide price from product details page.
.type-product p.price {
display: none;
}

Woocommerce hide out of stock products whole the site. Should hide if its variant is out of stock

I have seen so many links on stakeoverflow that are using some code to hide out of stock product. But its not working for me. I want to hide out of stock products from whole the site.
No matter the product is simple or variable, it should hide the product from whole site. In case of variable product if any of its attribute have 'Out of stock' state then it should hide that product.
WooCommerce has an option for that at:
Dashboard > WooCommerce > Settings > Products tab > Inventory page > Out Of Stock Visibility: Hide out of stock items from the catalog

Woocommerce How to make multiple product pages?

I am new to Woocommerce.
I need to make product list pages for Windows, Android, and Accessories.
I already organized them by categories and made setting to display by "categories and subcategories."
However, in Shop page, still the products are showing.
Can anyone tell me what is wrong with this?
Also, how to make multiple category product pages?
For example, windows products page only need to show Windows products. And Android products page only need to show Android products.
Thanks,
WooCommerce has default product category template and it has a default slug named 'product-category'.
So you can show different products by using the link likes:
http://yoursite.com/product-category/windows
http://yoursite.com/product-category/android
There are also some plugins that provide shortcodes/elements, so you can insert the shortcode or element on your page to show products for specific cateogry.
For example, if you are using WooCommerce with Visual Composer, there is a Product Categories element.
So you can insert the element with specific category setting on your page.
First you should delete the shop page and make a page what you want to name. Also make a category with the same name. Then use this short code [products limit="8" columns="4" category="hoodies, tshirts" cat_operator="AND"] . In the place of hoodie and tshirt you specify your own category's slug name and that's it. And paste it in the page short code box. Now the page will only show one specific category product in a single page. You can also change products limit and number of products in a row.

Resources