[Support request] White part in shop.

[Fernando]

Hello,

It seems that you may have accidentally removed some code in Appearance > Customize > Additional CSS. Particularly, in /*— SINGLE PRODUCT —*/ section.

If this is not intentional, the entire code is:

/*=== WOOCOMMERCE ===*/
/*--- SINGLE PRODUCT ---*/

/* Stacked Gallery for desktop and sticky summary */

@media (min-width: 769px) {
	.woocommerce-product-gallery {
		display: none;
	}

	.woo-summary-wrap {
		display: grid;
		grid-template-columns: 60% 40%;
		grid-template-rows: auto;
		margin-bottom: 80px;
	}

	.woo-gallery-stack {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.woo-gallery-stack img {
		margin-bottom: 20px;
	}

	.woocommerce-tabs {
		grid-column: 1;
	}

	.woocommerce div.product div.summary {
		grid-column: 2;
		grid-row: 1;
		margin-left: 80px;
		position: -webkit-sticky;
		position: sticky;
		top: 105px;
		bottom: 100px;
		padding-right: 80px;
	}

	.single-product span.onsale {
		position: absolute;
		top: 0;
	}
}

If it’s intentional, and you want to retain the sticky-ness of the product summary on tablet and desktop, you can try this code:

/*=== WOOCOMMERCE ===*/
/*--- SINGLE PRODUCT ---*/

/* Stacked Gallery for desktop and sticky summary */

@media (min-width: 769px) {
	
	.woocommerce div.product div.summary {
		grid-column: 2;
		grid-row: 1;
		margin-left: 80px;
		position: -webkit-sticky;
		position: sticky;
		top: 105px;
		bottom: 100px;
		padding-right: 80px;
	}

	.single-product span.onsale {
		position: absolute;
		top: 0;
	}
}

Or, you can delete that entire code if you prefer.

Hope this clarifies!

[M.schreijer@gmail.com]

Thank you for the quick response.

It’s good on mobile now. But now it’s not good on the desktop. see picture:

https://i.postimg.cc/RhrG8vgN/desktop.jpghttps://i.postimg.cc/RhrG8vgN/desktop.jpg
http://www.marktstore.nl/index.php/product/geboorte-knuffel-meisje/

[Fernando]

I see. It seems that if we make the product summary sticky, it won’t fit the viewport and it wont look good.

Example: https://share.getcloudapp.com/mXuxynYb

As shown, the product summary is too long, and it exceeds the viewport height.

With that said, one option we have is to delete that code entirely and it should look like this: https://share.getcloudapp.com/4gur9b5m

Kindly let us know.

[M.schreijer@gmail.com]

Thank you very much! Everything is working fine again!

But I hardly dare to ask…
It’s about the cart sub-menu

This one is not beautiful and clearly the font is also different. I’ve already searched the forum for how to solve this problem, but I can’t find it…..
See the picture.

https://i.postimg.cc/SRT6nyTm/Schermopname-44.png

[M.schreijer@gmail.com]

can the sub-menu also be turned off?

[Fernando]

Yes, the sub menu can be turned off. It can be done through Appearance > Customize > Layout > WooCommerce > General.

You’ll need to uncheck the “Display mini cart sub-menu” setting: https://share.getcloudapp.com/v1uO2kZe

Alternatively, if you want, you can also remove the variations in the sub menu to make it look neater. You can do this by adding this CSS in Appearance > Customize > Additional CSS:

#wc-mini-cart ul.woocommerce-mini-cart dl.variation {
    display: none;
}

Then you can also modify the font size of the product title for instance through this CSS:

#wc-mini-cart ul.woocommerce-mini-cart .woocommerce-mini-cart-item > a:nth-of-type(2){
    font-size:16px;
}

Kindly modify 16px to your preferred value.

You can also modify this font through the Typography module. Just set the target element to Custom and the target to #wc-mini-cart ul.woocommerce-mini-cart .woocommerce-mini-cart-item > a:nth-of-type(2)

Hope this helps!

[Author]

Posts