[allcalParticipant]

I have a question that I’m not sure is possible. I have a table in the Woocommerce product short description that has two sides – bullet points and a price table. I have set the category pages up to call the short product description into the category listings. He wants the bullet points to show in the category pages but not in the single product page.

Is there a way to do that?

I was thinking that creating css that changes the bullet points and bullet font color to white only on the single product page but stays black on the category page. Essentially hide the text to blend with the background. Is that possible?

Single Product: http://printmorespendless.com/allcal/product/pt1880w-4/
Category page: http://printmorespendless.com/allcal/product-category/p-touch/labeling-sys/desktop-models/

[ChristianModerator]

Hey there,

Please add the code below in your Appearance > Customize > Custom > CSS.

.single-product .summary  ul {
    list-style: none;
}

Hope that helps. 🙂

[allcalParticipant]

That code above just took away the bullet point but kept the text.

I added this to hide the text with the background.

.single-product .summary ul {
list-style: none;
color:white;
}

Is there a way to move the pricing table over to the left where the bullets “use to be” only on the single product page without changing the placement on the category page?

[LelyModerator]

Hi There,

Please also add this CSS:

.single-product .entry-summary td>table:first-of-type>tbody>tr:first-child>td:first-child {
    display: block !important;
}
.single-product .entry-summary table:first-of-type>tbody>tr:first-child>td:first-child {
    display: none;
}

Hope this helps.

[allcalParticipant]

I should have been more clear…that did work great but I wanted to move the table over with the same dimensions. About 55% width for the table not the entire width on the container. Also, it looks like the table has a bold or larger px border in the first column box “MSRP List”. Can that be fixed?

[RadModerator]

Hi there,

Not sure what you mean by 55% of the table, do you mean it should display half of its size?

And about the px border, please add this CSS as well,

.single-product .summary.entry-summary table > tbody tr:first-child td:first-child {
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
}
  

Hope this helps.

[allcalParticipant]

Images attached of what the end result should look like versus the current look.

[LelyModerator]

Hi There,

Please also add this CSS:

.single-product .summary.entry-summary table > tbody tr:first-child >td:nth-child(2) > table {

    width: 100% !important;
}
.single-product .entry-summary table:first-of-type {
    width: 50% !important;
}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[allcalParticipant]

Understandable. I did notice something though with the table. I applied your answers, but it made the first row of the table to have a smaller height than the rest. It’s not much, but its height is smaller. How do we fix that?

Also, there is a pesky top border line (of the table around the pricing table and bullet points) that I can’t get red of even though the table is set to border=”0″. How can I remove that?

Currently only applied:

.single-product .entry-summary td>table:first-of-type>tbody>tr:first-child>td:first-child {
display: block !important;
}
.single-product .entry-summary table:first-of-type>tbody>tr:first-child>td:first-child {
display: none;
}

.single-product .summary.entry-summary table > tbody tr:first-child td:first-child {
border-top: 0px;
border-right: 0px;
border-left: 0px;
}

[RadModerator]

Hi there,

Please change this CSS,

.single-product .entry-summary td>table:first-of-type>tbody>tr:first-child>td:first-child {
display: block !important;
}

to this,

.single-product .entry-summary td>table:first-of-type>tbody>tr:first-child>td:first-child {
display: table-cell !important;
}

And please add this,

table th, table td {
    border-top: 0px;
}

Hope this helps.

[allcalParticipant]

Your solution of

table th, table td {
border-top: 0px;
}

removed border lines from everywhere, like the checkout page which I do not want removed.

How can that css be applied to just the single product short description area to remove just that border-top line and not from everywhere on the site?

[ChristianModerator]

Please change it to

.single-product table th, .single-product table td {
    border-top: 0px;
}

Hope that helps. 🙂

[Author]

Posts