1) I want to make the categories text and woocommerce products text prominent. Please help me to do so.
Please take a look at the pic:
https://ibb.co/0rL27rh
2) Also I want to adjust the images of all woocommerce products and categories of one same size. Also provide me your suggestion on this matter.
Hi,
This is what you have now -> https://www.screencast.com/t/cm7JZedG and I think you want to achieve this -> https://www.screencast.com/t/HUfbNuONB8L
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
height: 350px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 17px;
font-weight: 600;
}
.woocommerce a.button {
position: absolute;
top: 88%;
}
Hope this will help you!
Thanks.
Hi,
Please replace the above custom css that I give you with this one
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
height: 350px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 17px;
font-weight: 600;
}
.woocommerce .td-pb-row .products a.button,
.woocommerce .td-pb-row .products .button:active {
position: absolute;
top: 88%!important;
right: 10px;
}
https://www.screencast.com/t/EJR4iOISs
Hope this will help you!
Thanks.
dear, I have added mistakenly as right, as I want to set the add to cart button on the center.
Also, when I click the add to cart button, then the button somewhat jumps upwards and bounces back. Plz help me in this
Hi,
Please use this code, will center the add button and solve the problem with jump
https://www.screencast.com/t/DQUFtdUOv71
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
height: 350px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 17px;
font-weight: 600;
}
.woocommerce .td-pb-row .products a.button,
.woocommerce .td-pb-row .products .button:active {
position: absolute;
top: 93%!important;
left: 50%;
transform:translate(-50%, -50%);
text-align: center;
}
Thank you!
Dear, the provided code works like charm, but I have 2 small problems.
1) In mobile devices the padding of add to cart button is quite wide. The same large padding is appearing under the product page as suggested products.
2) The text of the woocommerce categories didn’t change with the code.
Plz take a look at the pic
Hi,
Please remove the code that I give it to you and I will try to make a new one, a better one, this have some fix elements and that is way is not auto resize the height on mobile device.
Thank you!
Ok. will wait for your reply.
Thanks
Hi,
Please replace the above custom code with this one ->
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 370px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 17px;
font-weight: 600;
}
.woocommerce .td-pb-row .products a.button,
.woocommerce .td-pb-row .products .button:active {
display: block!important;
text-align: center;
}
@media (max-width: 767px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 320px!important;
}
}
Hope this will work better!
Thanks.
Dear, the latest given code is way too much awkward for me. Can you make the two changes with the previous code as to change the text size of woocommerce galleries and adjust the padding in mobile devices???
Also the text in the add to cart button is too much compressed. Please take a look at the pic:
If you want to take more time, then its no problem from my side. Thanks
Hi,
So you want to use the previous custom css, but adjust for mobile device;
I will try to do that as sun as possible, set the code here.
Thank you for your understanding!
Dear, you just have to make three changes in the previous code
1) Adjust the padding of add to cart button in mobile devices
2) Change the text of the Woocommerce Galleries (This text was not changed before in any of the CSS code provided by you)
3) Adjust the compressed text problem in add to cart button.
PLz take a look at the pic:
Plz take your time, I am not in a hurry but plz check all the required parameters before finalizing.
Thanks
Hi,
Please replace the code with this one
.woocommerce-checkout .woocommerce input.button, .woocommerce-page .woocommerce a.button, .woocommerce-account div.woocommerce .button {
font-size: 11px;
line-height: 11px;
font-weight: 700px;
font-family: Verdana, Geneva, sans-serif;
}
.woocommerce a.added_to_cart {
padding-top: 0;
}
@media (min-width: 768px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 350px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 17px;
font-weight: 600;
}
.woocommerce .td-pb-row .products a.button,
.woocommerce .td-pb-row .products .button:active {
position: absolute;
top: 93%!important;
left: 50%;
transform:translate(-50%, -50%);
text-align: center;
}
}
@media (max-width: 767px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 300px!important;
}
.woocommerce .td-pb-row .products a.button, .woocommerce .td-pb-row .products .button:active {
position: absolute;
top: 93%!important;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 80%
}
}
Hope this will work better!
Thanks.
Dear, I am sorry to say that the given code doesn’t solve two problems.
1) Padding in mobile device remains unchanged for me. Plz take a look at the pic:
2) The text of the woocommerce galleries didn’t change with the code. Plz take a look at the pic.
Only the compressed text size of add to cart button is resolved with the given code.
Plz check at your end…
Thanks
Hi,
Please remove that code and replace with this one, after you do that check the website and tell me were is still need some improves, but please set this code and do not remove it;
-> https://www.screencast.com/t/B5sKQEQI0
.woocommerce ul.products li.product .woocommerce-loop-category__title{
font-size: 18px;
}
.woocommerce-checkout .woocommerce input.button, .woocommerce-page .woocommerce a.button, .woocommerce-account div.woocommerce .button {
font-size: 11px;
line-height: 11px;
font-weight: 700px;
font-family: Verdana, Geneva, sans-serif;
}
.woocommerce a.added_to_cart {
padding-top: 0;
}
@media (min-width: 768px) and ( max-width: 1018px ){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 300px!important;
}
}
@media (min-width: 1019px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 350px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 17px;
font-weight: 600;
}
.woocommerce .td-pb-row .products a.button,
.woocommerce .td-pb-row .products .button:active {
position: absolute;
top: 93%!important;
left: 50%;
transform:translate(-50%, -50%);
text-align: center;
}
}
@media (max-width: 767px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 300px!important;
}
.woocommerce .td-pb-row .products a.button, .woocommerce .td-pb-row .products .button:active {
position: absolute;
top: 93%!important;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 80%
}
}
Also please clear all cache after you set the code;
Thank you for your understanding!
Dear, I have applied the code, but there are two problems.
1) The CSS Code Sheet showing 2 red cross in two line. Please take a look at the pic for further info.
2) The padding in mobile devices still remains the same and I didn’t observe any change.
3) Can you make the Woocommerce Text size as bold and large as used in the Woocommerce product? Plz used the same font pixel as used in woocommerce products and make it bolder.
I have set the CSS Code and wouldn’t remove it as suggested by you.
Thanks for your cooperation.
Hi,
That is because that error, please replace with this ->
.woocommerce ul.products li.product .woocommerce-loop-category__title{
font-size: 18px;
}
.woocommerce-checkout .woocommerce input.button, .woocommerce-page .woocommerce a.button, .woocommerce-account div.woocommerce .button {
font-size: 11px;
line-height: 11px;
font-weight: 700px;
font-family: Verdana, Geneva, sans-serif;
}
.woocommerce .td-pb-row .products a.button, .woocommerce .td-pb-row .products .button:active {
position: absolute;
top: 93%!important;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.woocommerce a.added_to_cart {
padding-top: 0;
}
@media (max-width: 1018px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 300px!important;
}
}
@media (min-width: 1019px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 350px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 17px;
font-weight: 600;
}
}
Thank you!
1) The padding in mobile devices still remains the same and I didn’t observe any change.
2) Can you make the Woocommerce Text size as bold and large as used in the Woocommerce product? Plz used the same font pixel as used in woocommerce products and make it bolder.
I have set the CSS Code and wouldn’t remove it as suggested by you.
Thanks for your cooperation.
Hi,
Please replace the code with this one ->
.woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-category__title {
font-size: 17px;
font-weight: 600;
}
.single .woocommerce ul.products li.product, .woocommerce-page ul.products li.product
{
min-height: 310px;
}
.woocommerce-checkout .woocommerce input.button, .woocommerce-page .woocommerce a.button, .woocommerce-account div.woocommerce .button {
font-size: 11px;
line-height: 11px;
font-weight: 700px;
font-family: Verdana, Geneva, sans-serif;
}
.woocommerce .td-pb-row .products a.button, .woocommerce .td-pb-row .products .button:active {
position: absolute;
top: 93%!important;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.woocommerce a.added_to_cart {
padding-top: 0;
}
@media (max-width: 1018px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 300px!important;
}
}
@media (min-width: 1019px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 350px;
}
-> https://www.screencast.com/t/4pO36pN05N
Thanks.
Dear, Great Job the code solve the problem of Woocommerce gallery text, But it still has some room for improvement.
1) The mobile padding for me sometimes looks fine, too wide and it sometimes overlapping the text of the product including its price. Plz take a look at the pic:
2) I want to slightly enlarge the text of the Woocommerce gallery let’s say 1-2px, how can I achieve that?
3) Can we make the product display size in gallery and recent products somewhat wider than the default in the mobile devices? It is absolutely perfect for desktop devices, but it is slightly thinner in mobile devices. Please let me know if we can fix it.
Thanks again for this magnificent effort.
Thanks
Hi,
1. Please try this custom css
.woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-category__title {
font-size: 17px;
font-weight: 600;
}
.single .woocommerce ul.products li.product, .woocommerce-page ul.products li.product
{
min-height: 315px;
}
.woocommerce-checkout .woocommerce input.button, .woocommerce-page .woocommerce a.button, .woocommerce-account div.woocommerce .button {
font-size: 11px;
line-height: 11px;
font-weight: 700px;
font-family: Verdana, Geneva, sans-serif;
}
.woocommerce .td-pb-row .products a.button, .woocommerce .td-pb-row .products .button:active {
display: block;
text-align: center;
}
.woocommerce a.added_to_cart {
padding-top: 0;
}
@media (max-width: 1018px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 315px!important;
}
}
@media (min-width: 1019px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 350px;
}
2-3 Unfortunately I do not know what text you are referring and what gallery please provide some more details and some screenshots.
Thank you for your understanding!
Dear, the second last code works perfect for as the recent code is still the one I have rejected once.
Please make some changes in the previous css code.
1) Slightly adjust the mobile padding, as it sometimes overlapping with the product name.
2) I want to make the product boxes in mobile devices somewhat wider. Please take a look at the pic and suggest me if it is possible.
Rest seems perfect for me.
Hi,
I think that can be be possible but I need some time to check the code for this and I will come back with a new code.
Thank you for your understanding!
No problem Dear. Take your time. I want to ask one thing that how can I change the text size of Woocommerce gallery in the code.
Please take a look at the pic:
Hope you understand. Thanks…
