Customize shop page

Hello again.After the successful transformation of the product page, I need some customization on the shop page

1. First of all, I need to increase the size of the product from above.Right now it looks like is cropped comparing with the bottom part of the image.
2. After doing so I need the “New” label move to the right.Especially in smaller devices, the two labels cover the image.
3. Look at the third image.Every time a user hovers over a product the bottom part of it is covered with the extra information from below.Can we move the highlighted part downwards so my product is clearly visible all the time?
4. Is it possible to enable the dark background layer (the same which is activated when we open the mobile menu or hidden cart sidebar)?Right now one product covers the other every time we hover it causing confusion to the users.
5 Look at the images.The problem appears in tablet vertical mode and below.The horizontal line disappeared only for the products of the second row
6. when I activate the list view you see the image below.I believe the image should be large enough until the middle of the screen and the rest should be the product description.Also, I want to enable this function in tablet vertical and horizontally mode.Finally every time I am changing the view mode the screen is moving to the top (look at the video) which I don’t like it.
Thank you for listening
Leonidas

Hello,

1. Here is a code for this

div.shop-loop-head {
	margin-bottom: 5px;
}

2.

div.product-labels {
    right: 0;
    width: 100%;
    max-width: 100%;
}

.product-label.new {
    position: absolute;
    right: 0;
}

3 & 4. Unfortunately, it is not possible without additional code customization.

5.

.woodmart-hover-base.state-hover .wrapp-swatches, 
.woodmart-hover-base:hover .wrapp-swatches {
    -webkit-transform: translateY(-2px) translateZ(0);
    transform: translateY(-2px) translateZ(0);
}

6. As you can see, the list view is already full width but you don’t have enough description text for this https://gyazo.com/0115904c255de3504750302916f9a757

Scroll effect can be disabled in Theme Settings -> Shop -> Scroll to top after AJAX.

Regards

1.embed the code but I didn’t see any change.Also increased the number of pixels to see it clearer.Nothing

As we can see, you set it to 55 and now the space is large. Do you want to decrease or increase it? Just play with pixels and you will see the difference.

I want to increase the upper part of the product.

Try this code

.woodmart-hover-base .product-element-top {
		background: white;
    padding-top: 25px;
}

http://prntscr.com/hg9rt5

Perfect!
2.The code is ok.Another question concerning the labels:
Are you planning to add a label for stock out products or do I need a plugin?

Now that I have more space can I move the labels a little bit upwards?

We don’t plan to add more labels at the moment.

You can move labels with this code

div.labels-rectangular {
    top: 25px;
}

Ok, it worked.

6. Look at the video.This is what I want.

Also, enable the buttons (third image) on table devices(vertical-horizontal)

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

div.product-list-item .product-element-top {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
}

@media (max-width: 1024px) {
div.woodmart-products-per-page,
div.woodmart-products-shop-view {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
}

@media (max-width: 767px) {
    div.product-list-item .product-element-top {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
}
}

Regards

Perfect.We only need to make the product images larger
http://prntscr.com/hgcnek
http://prntscr.com/hgcnvh

Sorry, but we can’t make images larger.
You can use this code snippet to move wishlist button a bit lower

@media (max-width: 1024px) {

	div.product-list-item .woodmart-buttons {
		top: 40px;
	}
}

5.Perfect

OK, great.

I left topic 3.4 for last.With your help and my customizations, I am nearly at the end. I believe that darkening the background every time the user hovers a product image will make his experience much easier.Because I understand that this will require a lot of custom work I am willing to pay extra to make this beautiful theme suits my needs.
Anyway, for everything you’ve done for me until now, I will be glad to give you a five-star rating.
Waiting for your reply
Leonidas

Sorry, but we are not available for custom development at the moment. We can suggest you to hire our partners to do this job https://wpkraken.io/?ref=xtemos.studio
We have too much support requests at the moment and that is why can’t do any freelance work.

ok thank you for your reply and for your suggestion.You can close the ticket

[Author]

Posts