layout of shop/categoriy page display

[bikeboutique]

Hi,

I have some issues with the display of products on my shop and category pages (multi-masonry style):

1) The price tag is too big and covers too much of the product picture (especially on standard sized products). How can I reduce the font and the white background it sits on? (screenshot 1)

2) The font of the product title is too big und disappears behind the price tag. Wich font type (H1, H2?) controlls the title and price in the multi-masonry layout? (screenshot 4)

3) Products with a standard or tall thumbnail size display the “add to cart” (or “choose an option” or “sold out”) button while large products don’t. How can I hide this button on all products? (screenshot 2)

4) how can I reduce the gutters between products (I don’t want to eliminate the gutters – just reduce them a little to enlargen the product images)?

5) the gutters seem to be distributed unevenly, images don’t align the way they should (screenshot 3)

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) You can reduce the font suze using:

.product .cart-overlay .shop-actions .price-link .price {
    font-size: 12px;
}

2) What URL is that for, I do not see this on your site. It should be this CSS:

/* Title */
.products .product figure figcaption .thumb-info h4 {
	font-size: 12px;
}
/* Price */
.woocommerce .products .product .price, 
.woocommerce ul.products li.product .price {
	font-size: 12px;
}

3) Looks like your own CSS is causing that. It should be:

.products.multi-masonry-items .product .shop-actions>* {
    display: none;
}

4,5) What page URL, your boutique page is not using the shop layout for ex.

Thanks.

[bikeboutique]

Hi David,

thanks for your reply!

The URL for the attached screenshots is : http://bikeboutique.bike/produkt-kategorie/accessoires

1) + 2) font size is reduced, thanks! But the box behind it remains unchanged, so the product picture is still barely visible. How can I change the size and position (I would like it closer to the botton left corner) of that box?

3) The code you sent does not seem to change anything. I d not have a programming background and am prbably not qulified to see if something in our CSS interferes so I am sending our whole custom CSS sheet at the end of this message. Maybe you see something I don’t.

4) + 5) http://bikeboutique.bike/produkt-kategorie/accessoires

.products .product figure figcaption .thumb-info h5 {
  display: none;
}

.spb_parallax_asset {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3) inset;
    overflow: hidden;
    position: relative;
}

.text-block-content {
  left: -50px;
  right: 50px;
}

.gallery-item figure {
margin-bottom: 0;
}

.sf-icon img {
    border-radius: 50%;
}

.sf-icon.image-display {
    border-radius: 0; 
}

.summary .product_meta {
  display: none;
}

.shop-now-link{
display:none !important;
}

.woocommerce .products .product h3, .woocommerce ul.products li.product h3 {
   font-size: 13px !important;
}

/* Title */
.products .product figure figcaption .thumb-info h4 {
	font-size: 12px;
}

/* Price */
.woocommerce .products .product .price, 
.woocommerce ul.products li.product .price {
	font-size: 12px;
}

.products.multi-masonry-items .product .shop-actions>* {
    display: none;
}

[bikeboutique]

Hi,

I actually noticed another very similar problem:
In the “related products” section on my product pages the “add to cart”-icon and price appear on hover, but the icon covers the price. I actually don’t want the add to cart icon but only the price.
Please advice! Thanks!

http://bikeboutique-ffm.de/produkt/one-ecycle

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1,2) Please use this for height reduction and left positioning:

.product .cart-overlay .shop-actions .price-link {
    line-height: 42px;
    height: 42px;
}
.product figure .cart-overlay {
	left: 5px;
}

3) Please test this:

.products.multi-masonry-items .product .shop-actions>* {
    display: none!important;
}

4,5) The bottom padding is set to 30px, with this:

You can reduce that to 15px to match the left/right padding.

.woocommerce ul.products.multi-masonry-items.gutters li.product { padding-bottom: 30px; }

6) Please test this:

.related-products .cart-overlay .shop-actions {
    display: none;
}

Thanks.

[bikeboutique]

1,2) The box is smaller now and aligns nicely to the left but is still quite high. I tried reducing the padding on the bottom like this

.product figure .cart-overlay {
	left: 5px;
	bottom: 5px;
}

but I guess the alignment is to the top of the image and not the bottom and seen as I am dealing with various formats (standard, tall and large) the alignment to the top varies. Any ideas?

3) yes, I had tried that myself but that also hides the price tag, wich is obviously not wanted.

4,5) I added the line (with 15px instead of 30px) to the custom CSS but nothing happened. Does that belong somewhere else?

6) that worked! Thanks!

…unfortunately there are yet two more problems I had not noticed before:

7) The semi transparent white layer covering the product picture on hover is not as big as the picture. (see screenshot 5)

8) Price seems to be aligned to the top (regardless of the dimensions of the picture) while the cart-button is aligned to the bottom. (see screenshot 5)

regarding 7,8) and screenshot 5: I did temporarily delete all our custom CSS because I was worried something might interfere but these problems ramained.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1,2) You can adjust the bottom px value. The less, the closer to the bottom.

.product figure .cart-overlay {
	left: 5px;
	bottom: 5px;
}

3) Can you show me a link for this? Or test this:

.archive.woocommerce .product.mini-view figure .cart-overlay .shop-actions > .add-to-cart-wrap {
    display: none;
}

4,5) Please test this:

.woocommerce .products .product.product-display-gallery, .woocommerce .products .product.product-display-gallery-bordered, .woocommerce .products.product-type-gallery .product, .woocommerce .products.product-type-gallery-bordered .product {
    margin-bottom: 15px!important;
    padding-bottom: 15px!important;
}

7,8) What is the URL?

Thanks.