-
AuthorPosts
-
April 11, 2020 at 5:15 pm #1202970
Hi everyone,
I would like to make some changes on my product pages (you can find one page example in private content).
How could I increase the space between product price and product counter?
And how could I make this product counter and the Add To Cart button a little bit smaller?
Thanks a lot!April 12, 2020 at 2:08 am #1203013Hey fcp,
To increase the space between product price and product counter, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:.single-product-summary form.cart { padding-top: 20px !important; }
To make the product counter and the Add To Cart button a little bit smaller, try this css:
#top div.single-product-summary .quantity input.plus, #top div.single-product-summary .quantity input.minus,#top div.single-product-summary .quantity input.qty { line-height: 21px !important; width: 23px !important; height: 23px !important; } #top div.single-product-summary button[name=add-to-cart] { padding: 5px !important; } div.single-product-summary form.cart div.quantity { min-width: 50px !important; }
Best regards,
MikeApril 13, 2020 at 12:20 am #1203179Hi Mike,
Your code works like a charm, as usual :-)
I have a question about it: what is the line-height: 21px !important; exactly do? Because if I put 0px for example, nothing happens…I would like to adjust some other margins on this product page:
– reduce margin up to the product title
– in the Related Products section, increase the space between the text “Vous aimerez aussi” and products picture and reduce the space below those productsHow could I do that?
Thanks a lot for your help!!
April 13, 2020 at 11:46 am #1203267Hi,
The line height should be similar to the height, you would not want a line height of zero even if the height is overriding it.
It seems that I may have been logged in via a cookie before, but it must have expired, now I’m just seeing the maintenance page.
Please include another login so I can see the page and assist.Best regards,
MikeApril 13, 2020 at 11:02 pm #1203362Hi Mike,
But in your code the line-height value was not similar to the height value… Is is normal?
I didn’t want a line-height of zero, I only wanted to know what does this parameter change.I’m sorry for the login but I had some issues with my website today.
Could you please try to log in again with the same credentials, it must work.Thanks for your help!
April 14, 2020 at 10:46 am #1203513Hi,
Thanks, is the admin login URL and details in the Private Content area correct? The page doesn’t seem to load.Best regards,
MikeApril 14, 2020 at 4:07 pm #1203641Hi Mike,
Yes, I’ve just tried those credentials a few minutes ago and they worked.
Could you please try again?
Thanks!April 15, 2020 at 11:57 am #1203930Hi,
I was able to login this time, to remove the padding & margin from the single product pages around the “Vous aimerez aussi” please try this css:.single-product .avia-section-small .content,.single-product .avia-section-small .sidebar { padding-top: 0px !important; padding-bottom: 0px !important; } .single-product .avia-section-small.container_wrap { border-top-style: none !important; border-top-width: 0 !important; }
After applying the css, Please clear your browser cache and check.
Best regards,
MikeApril 18, 2020 at 12:21 am #1204794Hi Mike,
Thanks for your answer.
I changed a little bit your code and this is enough to reduce space below related products:.single-product .avia-section-small .content,.single-product .avia-section-small .sidebar { margin-bottom: -50px !important; }
About the rest of the code, I think I misspoke… What I would like to increase is the space between “Vous aimerez aussi” and related products (see screenshot extracted from the page in private content: https://imgur.com/kb0wINc).
Also, I would like to reduce margin up to the product title of products pages (see screenshot extracted from the page in private content: https://imgur.com/mKR4HiS).
Thanks a lot!April 18, 2020 at 4:31 pm #1204990Hi,
To increase is the space between “Vous aimerez aussi” and related products:#top.single-product .related.products > ul.products.columns-4 { padding-top: 20px; }
To reduce margin up to the product title of products pages:
#top.single-product .template-shop { padding-top: 10px !important; }
Best regards,
MikeApril 19, 2020 at 4:27 pm #1205258Hi Mike,
It works perfectly!
Is there a documentation somewhere on Enfold website with all those css for each element?
Thanks a lot!April 19, 2020 at 5:53 pm #1205288April 22, 2020 at 1:43 am #1205985Ok.
Thanks Victoria!April 22, 2020 at 6:08 am #1206038Hi,
Did you need additional help with this topic or shall we close?
Best regards,
Jordan ShannonApril 22, 2020 at 4:40 pm #1206259Hi Jordan,
Everything is ok for me on this topic.
Thanks! :-)April 22, 2020 at 8:17 pm #1206367Hi fcp,
Great :)
We are closing the thread.
If you need further assistance please let us know in a new one.
Best regards,
Victoria -
AuthorPosts
- The topic ‘Customize product page’ is closed to new replies.