Variable product labels in top left corner

  • Resolved marketing1997

    (@marketing1997)


    2 years, 9 months ago

    Hi,

    after the last update, the text left from the choosable options was “missing” on our variable product pages. Soo, we realized, it wasn’t missing, but hat changed it’s color to white. But also the font size and posizion had changed.
    I was able to correct size and color via custom css, but I don’t know how to change the position of the text. It’s totally fine being aligned on the left, but it should be at the same height as the value fields.
    I am not a professional. It took me a while to figure out how to change color and size. What I wrote is this: 

    .single-product .variations_form .variations .label {
	text-align: center;
	color: #5d5d5d;
	font-size: 16px;	
}

    The text-align doesn’t seem to change anything. I also tried changing margin and padding, but it also didn’t work. Can someone pleade tell me, what I need to add here in order to get the text in the center of the label heigth instead of the top?

    • This topic was modified 2 years, 9 months ago by marketing1997.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @marketing1997! How’s it going today?

    If I understood you correctly, you’re trying to make some tweaks on your variations label, isn’t it?

    This is a bit out of scope for us, since those elements are handled by your theme and their CSS stylesheet.

    However, I went ahead and create this code that you can test:

    /* adding some top - left margin to the variations label*/
.variations label {
  margin-top: 10px;
  margin-left: 25%;
}

    You can adjust both margin-top: and margin-left: values to fit your needs!

    If this doesn’t help, I’d recommend checking it out directly with your theme developer, however, I really hope that helps! ??

    All the best,

    Oh Hey @marketing1997!

    I forgot to mention, you can try the code above, adding it to your CSS custom area on a new line.

    To do so, copy the code above and then navigate to WordPress Dashboard > Appearance > Customize > CSS .

    You don’t need to replace any existing code there, just paste it below what is already there.

    Thank you!

    Thread Starter marketing1997

    (@marketing1997)

    Hi André,

    thank you so much! ?? I did not want to move it to the right, but I needed to get the space on top back. So I used your code and deleted the margin-left line. It worked, I’m so glad, you saved my day! ??

    Best regards

    Glad to hear that it’s all sorted out!

    Please feel free to open a new topic if you have any other questions.

    Cheers ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Variable product labels in top left corner’ is closed to new replies.