Breaking space between SKU & Categories

  • Resolved lenkaiser

    (@lenkaiser)


    8 years, 11 months ago

    I have this issue on two different sites and both are using different themes from each other, so possibly this is by design, I do not know.

    1. I need the SKU to have a breaking space after it and before the categories therefore making it where they are on two separate lines. I have a screen shot here of what I’m taking about: https://s12.postimg.org/f4gnx81gt/screenwoocommerce.png

    2. I need to be able to change the word SKU: & Categories: to include some special CSS coding which I can create myself I just need to know where to edit it in the php files or templates. I have not been able to find it at all in the files. I’m a seasoned coder so I know how to add code.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter lenkaiser

    (@lenkaiser)

    Ok I actually went back and tried something that worked pretty well so I’ll post it here in case someone else needs this info. Here is what I did:

    Edited the style.css and added the following code at the bottom of the css template:

    .sku_wrapper {
    display:block !important;
}

.sku {
   color:red !important;
   font-weight:bold !important;
}

.posted_in {
    display:block !important;
}

    This put each item on one line and made the SKU itself stand out in bold red, but I was actually shooting for the words SKU:, Categories: & Tags: to be bold red, but hey since I cannot find css for those I can live with the results I got.

    I have 3 groups on my site, “SKU”, “Categories” and “Tags” so I added this to my “Template Wide Custom CSS”:

    .sku_wrapper, .posted_in, .tagged_as
{
  padding-top:0;
  padding-bottom:0.2em;
  display:block;
}
.sku_wrapper .sku
{
  color:#5bc4f1;
  font-weight:bold;
  letter-spacing:0.07em;
}

    The first part sets all 3 as blocks and makes space under them to divide the lines. The second part colors the sku and adds a tiny amount of space between the letters so it is easier to read.

    If you want to make the words SKU:, Categories: & Tags: to be bold red, make the first part:

    .sku_wrapper, .posted_in, .tagged_as
{
  padding-top:0;
  padding-bottom:0.2em;
  display:block;
  color:red;
  font-weight:bold;
}

    This will make the commas red bold also but I have not figured out how to fix that yet.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Breaking space between SKU & Categories’ is closed to new replies.