Hide/Customize Woocommerce Components with CSS

Sometimes you need to hide certain elements from the WooCommerce Product Page in order to make it more aesthetically pleasing and to address any issues.

Examples of elements include the Add to Cart button, Meta Description, and Tags. For example, you may wish to hide the Tags on the Meta Description and have only the SKU and Categories visible.

This tutorial will teach you exactly how to do that.

However, if you don’t find the elements you need here, feel free to contact us at [email protected] and we will be more than happy to help you.

Hide elements from Meta Description

/*HIDE SKU FROM META DESCRIPTION*/

.product_meta span.sku_wrapper {
display: none;
}

/*HIDE CATEGORIES FROM META DESCRIPTION*/

.product_meta span.posted_in {
display: none;
}

/*HIDE TAGS FROM META DESCRIPTION*/

.product_meta span.tagged_as {
display: none;
}

Customize gap below Product Price:

/*Gap After Product Pricing*/.product-price-container p {margin-bottom: 10px; /*Choose the margin you want*/
}

Make Add to Cart Button as Full-width

/*Make Add to Cart Button as Full-width*/

.single_add_to_cart_button {
    display: inline-block;
    width: 100%; /*width = 100% is the same as full*/
}
}

Hide Quantity button only from Single and Variation products

/*Hide quantity button from all single product pages*/
.add-to-cart-container .quantity {
	display: none;
}

/*Hide quantity button from all variation product pages*/
.variations_button .quantity {
	display: none !important;
}

Set a Full Screen Mobile Menu

/* Mobile Menu Full */
.off-canvas .mobile-sidebar-slide {
	width: 100% !important;
}

.mfp-content {
	width: 100% !important;
}