Home › Forums › WoodMart support forum › Show Swatch name / title on variable product pages

Show Swatch name / title on variable product pages

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 8, 2019 at 3:56 pm #100717

    Schuifdeurexpert
    Participant

    Hi,

    On the variable product pages the titles of the swatches only appear when hovering on the image.

    Is there a way to add the title below or above the image without having to hover? (see image) This would be very helpful, especially on Mobile view.

    Attachments:
    You must be logged in to view attached files.
    January 9, 2019 at 7:43 am #100829

    Elise Noromit
    Member

    Hello,

    Add this JS snippet On document ready into the Theme Settings > Custom JS:

    jQuery('.image-swatch.woodmart-tooltip').tooltip('destroy');

    And this CSS code to the Theme settings > Custom CSS > Global: 

    body .swatches-select .woodmart-swatch.image-swatch {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
	width: auto;
	min-width: 57px;
	background-size: 45px;
  background-position: top center;
  background-repeat: no-repeat;
}

.swatches-select .woodmart-swatch.image-swatch:before { 
	content:attr(data-value);
	font-size: 14px;
}

    Best Regards

    January 9, 2019 at 1:52 pm #100942

    Schuifdeurexpert
    Participant

    Very helpful! thank you !

    January 9, 2019 at 4:01 pm #100964

    Eric Watson
    Participant

    You are welcome!

    December 21, 2019 at 10:10 pm #164426

    Schuifdeurexpert
    Participant

    After the most recent update, the above function/code doesn’t work anymore.
    The swatch images also got smaller again after the update

    How can I fix this?

    December 22, 2019 at 7:07 pm #164533

    Artem Temos
    Keymaster

    Hello,

    Try to replace old code with new JS snippet On document ready into the Theme Settings > Custom JS:

    jQuery('.swatch-with-bg.woodmart-tooltip').tooltip('destroy');

    And this CSS code to the Theme settings > Custom CSS > Global:

    .swatches-select .woodmart-swatch.swatch-with-bg {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
    background-size: 45px;
	width: auto;
    height: 65px;
	min-width: 57px;
    border-radius: 0;
	
  background-position: top center;
  background-repeat: no-repeat;
}

.swatches-select .woodmart-swatch.swatch-with-bg:before { 
	content:attr(data-value);
	font-size: 14px;
}

    Regards.

    December 23, 2019 at 3:05 pm #164705

    Schuifdeurexpert
    Participant

    Thank you, working like a charm!

    December 23, 2019 at 10:05 pm #164706

    Artem Temos
    Keymaster

    You are welcome!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)