Product and Shop Modifications

Hello team,

Our client wants to know if the following option is available. Take this particular product as an example:

Tabletop Beech Premium

First of all, when the user clicks on any color, the color should CHANGE without having to choose the other options (Thickness and Dimensions). Now the default setting is that the color doesn’t change at all (we can’t select a color) if we don’t also select variables of the other two above-mentioned attributes.

Secondly, when the user opens a product page (take the same product as an example), the attribute color should already be selected. Take this other product as an example of how it should be:

Oxford Beech Coffee Table

As you can see, when we open the Oxford Beech Coffee Table, the attribute color is already highlighted on the first color in the list.

Also, if the user clicks on the color attribute which doesn’t have pictures assigned to it, a message should display: “Out of Stock – Would you like to place a custom order?” – and we should be able to place a button that when pressed, should take us to a contact 7 form in which the user can place his order manually (he should write what he wants) and the owner will get an email.

Then, the featured image should not appear under the same featured, main image on the product page. It’s already set to appear as the biggest one, so it should not appear again underneath. Only the images in the image gallery should appear.

Then, our client also wants the following:

Let’s take this product as an example:

Oxford Beech Coffee Table

This product has the HOT and SALE labels on. Our client wants that the HOT and NEW labels to appear always on the right hand top corner of the image on the product page, and ALSO on the SHOP page (or category page). Also, he wants the SALE to always appear on the left hand side top corner, as it does now. (but on the shop page it’s actually on the top right hand-side). Please provide the corresponding CSS codes in order for this to happen.

Also, the client wants that the text inside the SALE label to be made bigger. (on the product page at least)

Also, is it possible to create a new attribute and assign it to some products (for example, Wood Type – Beech and Oak) but without displaying them on the actual product page? I think I remember there was an option for that… After this I need to set up a filter on the sidebar of the shop page which will choose between Oak and Beech…

Sorry for the long post. We are tired. 🙂

Also, feel free to take the admin details and connect and make any modifications needed.

Kind regards,

Hello,

1. You need to select all product attributes (colors, size, etc.) to change the feature image. It is how WooCommerce works and we are not able to change this. We recommend you use “Default variation” functionality to make some colors selected by default. https://prnt.sc/zu38yn

2. Unfortunately, there is no such functionality in WooCommerce and we don’t have instructions on such customization.

3. Remove all your custom CSS for the labels and replace with the following one

.product-labels {
  left: 7px;
  right: 7px;
  pointer-events: none;
  align-items: flex-end;
  max-width: 100%;
}
.product-images .product-labels {
	left: 15px;
  right: 15px;
  max-width: 100%;
}
.product-labels .product-label.onsale {
  position: absolute;
  left: 0;
  top: 0;
}
.product-images .product-label.onsale {
  font-size: 14px;
}

Hi, thanks so much, I have forwarded your answer to our client.

How can we change the CSS code so that the HOT & NEW labels are on the left and the SALE label is on the right please? So the other way around if that’s possible please. And thank you!

I’ve just realized you sent me the correct code for what I wrote. Sorry. Please ignore my previous response. Thank you!

We are glad to help you. Feel free to contact us if you have any additional questions.

[Author]

Posts