[Oxley-2014Participant]

Hello X-men,

I am trying to modify the display of the products meta data (sku, categories, tags) on the single product page.
I would like them being one under the other one. So, in another words I would like to display on one line the “sku” then on the next line the “categories” then on the next line the “tags”.
I did not find how to do this. Could you show me, please?

Also, I have added the “Pay with PayPal” button on the product page. This button is displayed right under the “Add to cart” button.
It creates a real mess with the product meta data.

Here is before adding the PayPal button:
https://www.dropbox.com/s/pg8w4xpg3lmx5y6/1%20-%20Without%20PayPal%20button%20copy.png?dl=0

And here is the result when adding the PayPal button:
https://www.dropbox.com/s/1nsxfo0nq745i93/2%20-%20With%20PayPal%20button%20copy.png?dl=0

I have tried to use different CSS codes and here is what I succeeded to get:
https://www.dropbox.com/s/j1k3pcswxmyh4gr/3%20-%20What%20I%20succeeded%20to%20do%20copy.png?dl=0

I have tried this:

div.product_meta {
  margin-top: 155px;
}

and also this:

.summary.entry-summary .product_meta {
  margin-top: 155px;
}

Both pieces of code allow to fix the mess with the product meta data and the “Add to cart” – “Pay with PayPal” combo.
But I dont know which one of these two pieces of code is better or if I even should use another one.
Could you tell me, please?

Also I would like to modify the space between the “Add to cart” button and the “Pay with PayPal” button but I can’t figure out how to proceed.
Could you help me again, please?

Thanks in advance, guys.
Regards,

[Oxley-2014Participant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for writing in.

I don’t see any PayPal button, please add one. For the meantime, please add this CSS

.product_meta .sku_wrapper, .product_meta .posted_in, .tagged_as, form.cart button[type="submit"] {
display: block;
clear:both;
}

form.cart button[type="submit"] {
margin-bottom: 10px;
}

Thanks!

[Oxley-2014Participant]

Rad,
Hello and thank you for your answer.
Unfortunately for a technical reason I had to remove the PayPal payment option at the last minute which let my request a bit nonsensical. Sorry about that.

It is on again and I have put your code in the CSS editor.
That displays the meta data the way I wish.
But first, if possible, I would like to display the meta data after the quantity button and then the payment buttons and not the payment buttons first and then the meta data.
How to proceed, please?

Second it looks like the 2 payment buttons are somehow connected. I simply can’t change the space between them with your second piece of code.
And the same goes between the second button and the meta data. I can add space between the data but not between the second payment button and the first data.
Could you help me to manage the space between the two payment buttons, please?
Could you help me to manage the space between the second payment button and the data, please?

=================================

Here is another question:

I made some changes to the quantity button (I don’t know if there is a technical word to describe this kind of button…)
Could you tell me if the CSS code used is ok?

.woocommerce .quantity input[type="number"] {
  font-weight: bold;
  color: white;
  border-radius: 4px;
  background: #5faa37;
}

=================================

Last question:

The PayPal button that is on the single product page and also on the cart page is actually an image.
By definition an image is static so it does not show there can be an interaction.

Is there a way to have this button having a visual effect when hovered over?
By visual effect I mean having this button to show a different border color when hovered over like a normal button can display.
So, a border would display around the image (like a new border to the image border). Is this possible?
Or may be you have a better idea to show that an interaction is possible with this button. Could you tell me, please?

If not possible to do anything with this “Image” button I can switch to a normal button. But then I would like to add the PayPal logo on this button. Is it possible to cover a normal button with an image?
If possible could you tell me how to proceed, please?

=================================

Thanks in advance for all your answers.

Regards,

[RadModerator]

Hi there,

1. Please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery('.single-product .product_meta').insertAfter('.quantity');

Then add this CSS as well,

.single-product .product_meta {
    display: block;
    margin-bottom: 1.313em;
}

As for the button spacing, it overrides by another CSS which is why it’s not working. Please change it to this

form.cart button[type="submit"] {
margin-bottom: 20px !important;
}

2. And yes, your CSS is okay and it’s working.

3. Border hover effect is possible, but manipulating existing image isn’t. Unless you can edit the source code and add more customization. Please add this for border effect,

.angelleye_button_single input {
border: 1px solid transparent !important;
border-radius:5px;
position: relative;
left: -1px;
  }
.angelleye_button_single input:hover {
border: 1px solid red !important;
}

Hope these helps 🙂

[Oxley-2014Participant]

Hello Rad,
Thank you for your answer. It has helped a lot!

Finally I realized it was better to have the product meta data after the short description and then the info about the stock and buttons for order.

So I modified your code Javascript code with the following.

jQuery('.single-product .product_meta').insertBefore('p.stock.in-stock');

It works but is it correct?

Concerning the CSS code you provided :

.single-product .product_meta {
    display: block;
    margin-bottom: 1.313em;
}

It does not work so I used the former one provided in the first answer.

.product_meta .sku_wrapper, .product_meta .posted_in, .tagged_as, form.cart button[type="submit"] {
	display: block;
	clear:both; 
}

This one works but I guess now with the changes I should remove “form.cart button[type=”submit”]” from it. Could you confirm I should remove it?

The code for the button spacing does the trick, thanks!

The code for the Border hover effect is EXACTLY what I was looking for, I am so happy, 1000 thanks!

==============================================================

I have three more questions, please, please, please.

First:
I would like to “highlight” the sku label, the category label and the tag label so I would like them being in bold font when the value stays in a normal font. How to do this?

================================

Second one:
I would like the product main description showing a round shape like the buttons (quantity, add to cart, etc). Actually I would like the first row with the 2 nav-tabs and the main product description looking like if they were only one element even if they are 3 elements.

So, I would like the left top corner of the “Description” nav-tab and the right top corner of the “Information complementaire” nav-tab being rounded. And the left and right bottom corners of the product description being rounded too.

For the bottom part I have used:

div.x-tab-content {
  border-radius: 0px 0px 15px 15px;
}

It works but is it correct?

For the upper part I have used:

x-nav-tabs.top> li a {
  border-radius: 15px 0px 0px 0px;
}

This code makes the left top corner of the “Description” nav-tab and the left top corner of the “Information complementaire” round. This is obviously not what I want to achieve. Could you tell me how to proceed, please?

The ideal scenario would be that you also tell me how to round the shape of the 3 other nav-tabs (Composition, Utilisation, Mise en garde). Then I would be able to test different roundish scenarios.

================================

Third and last question:
It concerns the PayPal button that is displayed on the Checkout page.
It uses the same custom image than the one on the product page but the settings are that this image on this page is much smaller. The custom image is 248px wide but here the setting says it has to be displayed as 150px wide. Unfortunately after several attempts I can’t figure how to change this out. The button looks much too small. Could you help me to show the button as his real size is, please?

And the same as before I would love a Border hover effect on this button too.
I can’t find the “name” of this button.

Thanks you in advance VERY MUCH for your help.

Regards,

[RadModerator]

Hi there,

Yes, your javascript code correct, as long as it targets your preferred element.

You should add the CSS and not to replace any existing CSS. These should be there

.product_meta .sku_wrapper, .product_meta .posted_in, .tagged_as, form.cart button[type="submit"] {
	display: block;
	clear:both; 
}

.single-product .product_meta {
    display: block;
    margin-bottom: 1.313em;
}

This CSS add space between meta and buttons, hence, it’s okay to remove it since you changed your javascript.

.single-product .product_meta {
    display: block;
    margin-bottom: 1.313em;
}

Since there were changes from initial design preference, then it’s okay to remove CSS made for that specific design. Like “form.cart button[type=”submit”.

As for the other questions,

1. Please add this CSS

  .product_meta .sku_wrapper {
  font-weight: bold;
  }
.product_meta .sku_wrapper .sku {
  font-weight: normal;
  }

2. Yes correct, but tab-nav CSS should be like this,

  .product .x-nav-tabs.top> li:first-child a {
    border-radius: 15px 0px 0px 0px;
}
.product .x-nav-tabs.top {
        border-radius: 15px 15px 0px 0px;
}
  .product .x-nav-tabs.top> li:last-child a {
    border-radius: 0px 15px 0px 0px;
}

Should the center tab (3 tabs) has border-radius too? If yes, You’ll have to add this too

.product .x-nav-tabs.top.three-up> li:nth-child(2) a {
    border-radius: 15px 15px 0px 0px;
}

3. Please add this CSS as well,

body.woocommerce-checkout .woocommerce #checkout_paypal_message #paypal_box_button > div img, body.woocommerce-checkout #paypal_ec_button {
    width: 249px !important;
}
body.woocommerce-checkout .woocommerce #checkout_paypal_message #paypal_box_button > div img {
border: 1px solid transparent !important;
border-radius:5px;
position: relative;
left: -1px;
  }
body.woocommerce-checkout .woocommerce #checkout_paypal_message #paypal_box_button > div img:hover {
border: 1px solid red !important;
}

Hope this helps 🙂

[Oxley-2014Participant]

Rad,

Thank you very much again for your help! I am really happy with the result.

There are just two little things I would like to be fixed, please.

Concerning my first question:
“Highlighting” the sku label, the category label and the tag label means them being in bold font when the values display with a normal font.

So, I would like the word SKU (here UGS) in bold font and then the number that follows being in normal font, the word “Catégories” being in bold font and then the category(ies) displayed for the concerned product being in normal font, the word “Étiquettes” being in bold font and then the tag(s) displayed for the concerned product being in normal font.

The code you provided works well for the sku but I can’t succeed to adapt it for the category and the tag. Is there a way to do it? At the moment I have set everything with bold font.

Concerning my second question:
The last part about the 3 other nav-tabs concerned the tabs that are on the bottom right side of the main description. They are usually “description”, “utilisation”, “Précautions d’usage”, etc.

I would like the first one with round corners on the upper part and the last one with round corners on the bottom part in order to obtain a rounded shape for the block that form these nav-tabs.

I achieved this with:

.product ul.x-nav.x-nav-tabs.five-up.right> li:first-child a {
    border-radius: 15px 15px 0px 0px;
}
.product ul.x-nav.x-nav-tabs.five-up.right {
    border-radius: 15px 15px 15px 15px;
}
.product ul.x-nav.x-nav-tabs.five-up.right> li:last-child a {
    border-radius: 0px 0px 15px 15px;
}

I put the same code with 2,3,4 and 5 for the part “.product ul.x-nav.x-nav-tabs.five-up.righ” as the number of tabs is different depending on the product that is displayed. This code works.
Anyway, could you validate if this code is appropriate?

This is really the result I was looking for. The only one thing that needs to be fixed is the border that surrounds the text that is displayed under the main description. This is the text that is displayed when clicking the nav-tabs on the bottom right side.
Actually this text area is under the main description but is also “kind of” part of the main description and this is where it becomes tricky.

The main description has square corners at the top because above it there are the two main nav-tabs with round corners. The main description has round corners at the bottom which is done on purpose. These 3 elements together (the two main nav-tabs with round corners at the top + the main description with round corners at the bottom) form a rounded shape.

The class of the main description is “div.x-tab-content” and I am using this CSS code:

div.x-tab-content {
  border-radius: 0px 0px 15px 15px;
}

(So, square corners at the top and round corners at the bottom for the main description).

The border surrounding the text that is displayed by the bottom right-side nav-tabs is following the same behavior (square corners at the top and round corners at the bottom) since the class concerning this area has the same name as the class of the product main description. (“div.x-tab-content”)
I dont find a way to differentiate the two.

Here is a picture if it helps: https://www.dropbox.com/s/ziofpwvg8qgw3fk/4%20-%20Main%20description%20and%20bottom%20right%20nav-tabs%20text.jpg?dl=0

This is what I would like to be fixed. The main shape is rounded. The right-side nav-tabs form a rounded shape.
So, this border looks weird because not consistent with the rest.

Could you help me to do this?

Again, thank you very much for your help.

Regards,

[RadModerator]

Hi there,

1. Should be like this,

/* How to “highlight” the sku label, the category label and the tag label */
.product_meta .sku_wrapper, .product_meta .posted_in, .tagged_as {
  font-weight: bold;
}

.product_meta .sku_wrapper .sku, .product_meta .posted_in a, .tagged_as a {
  font-weight: normal;
}

2. It’s correct, but I don’t understand what’s the issue, should the content and tab appear as one whole pill type shape?

Thanks!

[Oxley-2014Participant]

Rad,

https://www.dropbox.com/s/1gceclt5rxuhpr3/5%20-%20Whole%20Main%20description.jpg?dl=0

On the first picture here (number 5 of the request) I drew a rectangle to highlight the WHOLE Main description.
It has square corners at the top and round corner at the bottom but this is ok because the upper round shape of the whole stuff is obtained with the upper nav-tabs.

https://www.dropbox.com/s/j3m6jjvix2vuuxr/6%20-%20Bottom%20nav-tabs%20Text.jpg?dl=0

On the second picture here (number 6 of the request) I drew a rectangle to highlight the text that is displayed by the bottom right-side nav-tabs.
The border that surrounds this text has square corners at the top and round corners at the bottom. This behavior is the same as the whole Main description but HERE this is a problem.
I would like this border to have four round corners in order to match the nav-tabs that are just on the right for example.

https://www.dropbox.com/s/1npmkh0dwzeojjt/7%20-%20Border%20should%20be%20round%20at%20the%20top%20to%20fit%20the%20style.jpg?dl=0

On the third picture here (number 7 of the request) I just highlighted the corners of this border again.

Fact is the border that surrounds the text that is displayed by the bottom right-side nav-tabs has the same class as the whole Main description (“div.x-tab-content”) and this where I am blocked. I dont know how to change the shape of one without changing the shape of the other.

Could you help me, please?

Regards,

[RadModerator]

Hi there,

Ah, You can try this,

div.x-tab-content div.x-tab-content {
  border-radius: 0px 0px 15px 15px;
}

This mean selecting only the child x-tab-content.

Cheers!

[Oxley-2014Participant]

Hello,
Rad,
Thank you!

We finally understood each other.
I jut needed to adjust with “border-radius: 15px 15px 15px 15px;” in order to have the four corners round for this specific “area”.

The product pages look exactly like I was expecting. I am SUPER happy. Thank YOU very MUCH for your precious help, RAD!

Now, I realize I need to ask a last question. When you click on “Information complementaire” you reach a table that has usually 3 rows but sometimes it can have 4 rows.
I would like this table to have a “pill” round shape like the other elements of the page.
Not every row with a pill shape but the entire table with a pill shape.

I tried:

table.shop_attributes {
	border-radius: 15px 15px 15px 15px;
}

but this does not work.

I tried:

table th,  table td {
    background-color: #cce0ff;
    border-radius: 15px 15px 15px 15px;
}

and this make every header and every “content” space of every row with a “pill” shape.

I tried this:

table.shop_attributes, table th , table td {
background-color: #cce0ff;
border-radius: 15px 15px 15px 15px;
border: transparent;
}

That makes every row with a pill shape and then with the transparent borders it looks like the table is only one big element with a pill shape but I guess this is not the proper way.

Could you help me with this last request, please?

Thanks in advance,

Regards,

[RadModerator]

Hi there,

Glad to hear that 🙂

As per for your last question, please add this too

  table.shop_attributes {
  border-radius: 15px;
  }
  table.shop_attributes tr:first-child th:first-child,
  table.shop_attributes tr:first-child td:first-child {
  border-radius: 15px 0px 0px 0px;
  }
  table.shop_attributes tr:first-child th:last-child,
  table.shop_attributes tr:first-child td:last-child {
  border-radius: 0px 15px 0px 0px;
  }
  table.shop_attributes tr:last-child th:first-child,
  table.shop_attributes tr:last-child td:first-child {
  border-radius: 0px 0px 0px 15px;
  }
  table.shop_attributes tr:last-child th:last-child,
  table.shop_attributes tr:last-child td:last-child{
  border-radius: 0px 0px 15px 0px;
  }

Cheers!

[Oxley-2014Participant]

Thank you Rad,
That’s perfect!!!

For the background color of this table I have used:

table.shop_attributes, table th , table td {
    background: #5faa37;
}

because

table.shop_attributes {
    background: #5faa37;
}

did not work.

I hope it is the proper code to use.

Again, Rad, thank you very much for all your precious answers!

Regards,

[RadModerator]

You’re so much welcome 🙂

Yes, the CSS is correct because table background is applied on its cells too.

[Author]

Posts