Docs

[Oxley-2014]

Hello,
I would like to modify the “style” (font, font-size, font-weight, etc) of different titles using CSS code. I found some answers by myself but I am not sure I am doing it the correct way. So I prefer to ask you the solution.

I would like to:

1 – Modify the style of the shop title,
2 – Modify the style of products name in the shop (list of products in the shop pages).
( first image:
https://www.dropbox.com/s/v7is3qiooagwygb/1%20-%20Shop%20title%20and%20Products%20name%20in%20the%20store.png?dl=0 )

3 – Modify the style of the products name in their specific page,
4 – Modify the style of “Product description” in the Description tab content (not the tab title).
(second image:
https://www.dropbox.com/s/e2vvilmvg9b65c3/2%20-%20products%20name%20in%20their%20own%20page%20and%20%E2%80%9CProduct%20description%E2%80%9D%20in%20the%20Description%20tab.jpg?dl=0 )

5 – Modify the style of the Cart title,
6 – Use the same green lines of demarcation used for the short description (in the product pages) in the cross-sells section of the cart in order to demarcate the cross-sells products from the cart itself.
(third, fourth and fifth images:
https://www.dropbox.com/s/wyd0nga86cookl0/3%20-%20Cart%20checkout.png?dl=0

https://www.dropbox.com/s/d8oax18lp7cxdih/4%20-%20Example%20of%20use%20of%20green%20lines%20for%20delimitation%20of%20the%20short-description.png?dl=0

https://www.dropbox.com/s/f20q6fnbp9ytsdp/5%20-%20Cart%20checkout%20Objective.jpg?dl=0 )

Thanks in advance for your help.
Oxley

[Oxley-2014]

This reply has been marked as private.

[Christian]

Hey there,

Please add the CSS codes given below in your Appearance > Customize > Custom > CSS

1 – Modify the style of the shop title,

.woocommerce .entry-header.shop .entry-title {
    font-size: 20px;
}

2 – Modify the style of products name in the shop (list of products in the shop pages).

.woocommerce li.product .entry-header h3 {
	font-size: 16px;
}

3 – Modify the style of the products name in their specific page,

.woocommerce div.product .summary .product_title {
    margin: 0 0 0.25em;
    padding: 0;
    font-size: 228%;
    text-align: left;
}

4 – Modify the style of “Product description” in the Description tab content (not the tab title).

/* For h2 */
.x-tab-content .description_pane h2 {
	font-size: 50px;
}

/* For paragraph */
.x-tab-content .description_pane p {
	font-size: 20px;
}

5 – Modify the style of the Cart title,

.woocommerce-cart .entry-title {
	font-size: 50px;
}

6 – Use the same green lines of demarcation used for the short description (in the product pages) in the cross-sells section of the cart in order to demarcate the cross-sells products from the cart itself.

Please set the Cart Cross Sells so we could check the structure.

Thanks.

[Oxley-2014]

Christian,
Thank you very much for your answers.

Concerning question #4 I finally use:

.woocommerce div.product .woocommerce-tabs h2 {
    text-decoration: underline;
}

instead of

/* For h2 */
.x-tab-content .description_pane h2 {
	font-size: 50px;
}

that did not work.

Concerning question #6, at the moment only one product can show cross-sells. The explanation is given in my second message. The one in private. You got also my credentials if you need to check anything.

I have got another question (number 7 then). I would like to change the cart page title but I am not looking for a translation of the word “Cart” which is already translated. In the case of the page title I want to replace the word “Cart” by a sentence. So, I need to find the proper template and modify it.
I have not been able to find the proper template even if I checked cart.php, cart-totals.php, cart-item-data.php, etc. May be it was just in front of my eyes. May be it is more tricky.
Could you tell me which file I have to modify in order to replace the cart page title?

Thanks in advance for your help.
Regards,

Oxley

[Lely]

Hello Oxley,

Regarding the upsell product, I can see that it is not setup on other products. Please check this link:https://docs.woocommerce.com/document/related-products-up-sells-and-cross-sells/. Edit your products, Under Link Products Tab > Set Upsell properly. See attached screenshot. Do this to your other products as well.

For the Cart page title the template that handling it is _content-post-header.php from this folder \wp-content\themes\x\framework\views\icon. But then, we don’t have to edit the template because it is simply getting the page title. Go to Pages > Cart Page > Edit Page title Cart into your preferred title.

Hope this helps.

[Oxley-2014]

Lely,
Hello,
Thanks for your answer.

To change the page title by Going to Pages > Cart Page > Editing Page title is indeed the way to go. So obvious that I missed it…

Concerning the question #6 I do not understand what is the problem with my question…
I have set cross-sells and upsells up on ONLY ONE product. I wrote it clearly in my second message. So what is the problem with Christian and now you?
Yes, if I wrote that I set cross-sells and upsells up on ONLY ONE product it means then… that only one product has such a set-up.
Also if I have been able to do it on one product why would I need a link explaining what it is and how to do it? If I have been able to do it on one product then I can do it on other products, right?
Could you rather answer my question about modifying the cart page?

I want to demarcate the cross-sells products that appear in the cart page by using 2 green lines (1 above the product zone and 1 under) in the same way I demarcate the short description. You can see an example of the lines in the product short description with the picture number 4.
I am using [x_line style="border-top: 4px solid #5faa37;"] to draw the lines but I don’t know how to do the same in the cart page. Should I modify the template? Which one precisely? And how to implement the same kind of line in the code of the template? I am pretty sure that [x_line style=”border-top: 4px solid #5faa37;”] has to be modified to be added in a .php file.

You can see the result I want to obtain with the picture number 5. I took screenshots and time with Photoshop in order to show what I want to achieve hoping we would understand each other easier and faster.

Thanks in advance for your help.
Regards,

Oxley

[Christian]

Sorry missed that. No template modification is needed. Please add the code below in your Appearance > Customize > Custom > Global CSS to add a line above and bottom of your cart cross sell.

.woocommerce-cart .cross-sells {
    border-top: 4px solid #5faa37;
    border-bottom: 4px solid #5faa37;
    padding-top: 20px;
    margin-bottom: 1px;
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[Oxley-2014]

Christian,
Hello,
This is exactly what I was looking for. Thank you for your help!

Concerning your comment:
5 questions out of 6 were linked to the subject of my thread so I don’t understand why you put such comment in MY thread.
I have seen topics 3 pages long with 3-4 different people asking for their specific concerns but this is not the case here. This topic is still only one page long so I dont understand what is bothering you… Especially that AGAIN 5 questions out of 6 were linked to the subject of my thread.

NOW I have 1 last question that is also linked to the subject of my topic. I am sure that you will be happy to help me again. And I thank you in advance for that!

question 7:
I notice that product names on their specific page don’t use the width of the column where stand the short description. The short description has a 461px width when the product name just above only uses 406px. When the name is long enough to stand on several lines it does not look great.
Is it possible to use the same width (461px) for the product name? If yes, what is the code, please?

Thanks in advance for your help.

Regards,

Oxley

[Rue Nel]

Hello Oxley,

Thanks for the updates! I am another staff checking on this thread.

#7 There is no code needed. The content of the short description depends on whatever content that you will place in there. So for example your title, because you have added it this way:

<h5><strong>Est utile en cas d’<span style="color: #ff9900;">Irritation oculaire.
</span></strong><strong>Contenu :&nbsp;</strong><strong><span style="color: #ff9900;">15 ml.</span></strong></h5>

This why it displays two lines. Please keep in mind that WordPress will automatically converts line breaks and new lines to <br> or <p> tags. I would strongly suggest that you edit the short description and with no line breaks and use this instead:

<h5><strong>Est utile en cas d’<span style="color: #ff9900;">Irritation oculaire. </span></strong><strong>Contenu :&nbsp;</strong><strong><span style="color: #ff9900;">15 ml.</span></strong></h5>

You will then have this:

Hope this explains it briefly.

[Oxley-2014]

Rue Nel,
Hello and thank you for your answer but there is a misunderstanding here.

As you can clearly check above I wrote about the PRODUCT NAME so in this case it is “Visine Original”. But in order to better understand the problem it is better to check with a product that has a long name that requires 2 or 3 lines to show.
On top of that the problem I wish to solve has nothing to do with your answer. Sorry for this. I add a picture hoping it helps with my question.

You will see that the product name uses 406 px to show when all the elements of the short description are displayed using 461 px. I wish the product name to use the same width.

https://www.dropbox.com/s/vmzdusqei4z7tvz/6%20-%20Different%20widths%20used%20by%20product%20name%20and%20short%20description.jpg?dl=0

Thanks in advance for your help.

Regards,

Oxley

[Christopher]

Hi there,

Please update this code :

/* Style of products name in their specific page */
.woocommerce div.product .summary .product_title {
    margin: 0 0 0.25em;
    /* padding: 10px; */
    /* font-size: 228%; */
    text-align: justify;
}

To :

.woocommerce div.product .summary .product_title {
    margin: 0;
    /* padding: 10px; */
    /* font-size: 228%; */
    text-align: justify;
    width: 100%;
}

Hope that helps.

[Oxley-2014]

Christopher,
Hello

Works great. Thank you!

Regards,

Oxley

[Rupok]

You are welcome Oxley!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts