Home › Forums › WoodMart support forum › VARIATION BUTTONS ARE CROPING SHOP PAGE VARIATION IMAGES

VARIATION BUTTONS ARE CROPING SHOP PAGE VARIATION IMAGES

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 13, 2018 at 10:53 am #95818

    Jeriss Cloud Center
    Participant

    Dear,

    I have selected the “products style” which I liked the most for the Shop Page.

    However, I have products which are having variation colors. For those, as you can see in the AS IS (picture), the variation line that gets displayed is cropping the variation picture. That is not user friendly.

    I have even worse cases with 5, 10, and even 80 variation colors. It seems you did not foresee this situation in your products styles.

    To correct this non-user friendliness, I’d like to push down the variation colors that appears. See TO BE (picture). This is to make sure that the variation picture selected here wouldn’t be cropped.

    Can you tell me how to do this?

    Attachments:
    You must be logged in to view attached files.
    December 13, 2018 at 6:51 pm #95975

    Artem Temos
    Keymaster

    Hi,

    This element is located in the same tag as the image. So if we will do this, you will always have this swatches element shown (not only on hover). You can do this with this CSS code

    div.woodmart-hover-base .wrapp-swatches, 
div.woodmart-hover-base .wrapp-swatches {
    -webkit-transform: translateY(0) translateZ(0)!important;
    transform: translateY(0) translateZ(0)!important;
	position:relative;
}

    Kind Regards

    December 13, 2018 at 7:23 pm #95980

    Jeriss Cloud Center
    Participant

    See in attachments how the code behaves. Problem with hover.

    Attachments:
    You must be logged in to view attached files.
    December 14, 2018 at 7:02 am #96037

    Artem Temos
    Keymaster

    Add the following code as well

    div.product-grid-item .hover-img {
	display: block;
}
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)