Modifications – Product Page

Hello, my website is finished. However there is somethings that I need to do.

In the image attached there is how I want to stay.

1) Tooltip hover image in the swatches with name of variation
2) A circle instead the line in the swatches
3) Calculate shipping cost in the product page

Please, help me to do this.

Attachments:

You must be logged in to view attached files.

Hello,

Here is a custom CSS code to make circle instead of the line

.woodmart-swatch.image-swatch.active-swatch,
.woodmart-swatch.image-swatch:hover {
	    border: 2px solid white;
			border-bottom: 2px solid white!important;
			box-shadow: 0px 0px 0px 2px rgba(0,0,0,1);
}

.woodmart-swatch.image-swatch:after {
	display: none;
}

Sorry, but other questions can’t be achieved with a simple CSS tweak. They require more extra code customization that is out of our theme support scope.

Regards

2) Where can I put this css?

Please, help me with these things (Previous question):
1) Tooltip hover image in the swatches with name of variation
3) Calculate shipping cost in the product page

In what files should I modify? Only say this for me.

My website will be used on woodmart themeforest description, Artem talked with me and I approved.

I just need some orientation to do these modifications.

2. Put it to the custom CSS area in Theme Settings.

1 & 3. Sorry, but there is no place to change it since you are asking about additional functionality that doesn’t exist in our theme. We don’t have instructions for this and it is out of our theme support scope.

Kind Regards

What is the file that stay the swatch tooltip configuration?
In what file can i modify the product page?

Product variations swatches are located in the file woodmart/woocommerce/single-product/add-to-cart/variable.php.

[Author]

Posts