This topic has 36 replies, 4 voices, and was last updated 10 years, 4 months ago ago by Jack Richardson
i would like to increase the product width in home page for feature product and latest product. How can I make a border with product to add to cart button? I would be grateful to you if you please advise the relevant CSS codes. anyone can help me please??
Hello,
Please provide us with link to the page and wp-admin access.
Regards,
Robert Hall.
http://www.weightregulator.com/ please tell me what i need to do this woo commerce . i think i can do this. i need to create one border with images to add to cart button and width of the images
http://www.weightregulator.com/
To change style “add to cart” button on homepage you can in custom.css file
.product-grid .btn-cont .button {
(here your style code)
}
Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.
As I see you have already customized block width, try to download pictures with higher resolution.
Regards,
Robert Hall.
hi Robert i don’t want to change button color . i just want to increase the images width and create one border through images price and add to cart button like http://www.weightregulator.com/wp-content/uploads/2014/07/PRODUCT-WITH-BANNER.jpg. i gave high resolution to images but still images width same. please help me.
my template is blanco
Hello,
To change the width for featured and latest products you need add this code into custom.css file:
.product-image .img-wrapper img {
width: 500px;
}
(and change the value)
Please note that we don’t recommend to change the standard width value as your image may be distorted.
Please specify: do you wish to have border only for “Add to cart” button or around the whole product? Should it be added only for the featured and latest products or for all products located on the “Order now” page?
Thank you.
Regards,
Eva Kemp.
i want border around the whole product with price image and add to cart .border will be
featured and latest products and for all products located on the “Order now” page.
.product-image .img-wrapper img ,here width is 100% if i put 500 will it work?
regards
Please add this code into custom.css file:
.product-grid {
border: solid 2px black;
}
.button {
border: solid 2px black;
}
Change the values to yours.
To create custom.css you need rename the file “default.custom.css” to “custom.css” located in wp-content/themes/blanco via FTP. Then enable it in admin panel > Blanco – Theme Settings > check ” Enable Custom CSS file”.
To change the image width please add the exact code you’ve been provided with.
Regards,
Eva Kemp.
After adding this code my Order now page totally disorder . how can i solve this??
Still now images is not changing. i like to add margin inside and out side the border. shall i use custom.css file ?
I’ve added the following code into custom.css file:
.with-sidebar #products-grid.products_grid.rows-count4 .product-grid {
height: 270px;
}
.with-sidebar #products-grid.products_grid.rows-count4 {
width: 735px;
margin-left: -18px;
}
Please check “Order now” page.
Many many thanks for your great help but again order now page is not organised and add to cart button out of border. please help
I’ve added this code:
#products-grid.products_grid .product-grid {
margin-left: -1px;
}
#products-grid.products_grid .product-grid .btn-cont .button {
margin: -2px;
}
Please check the site now.
Thank you.
Regards,
Eva Kemp.
Thanks for your help.my site is http://www.weightregulator.com/ i want to increase the width of feature product images and latest product imsges.how can i do this please help me and
http://www.weightregulator.com/?product=3-days-juice-fast this pages images overlap with text how to fix this problem
Hello,
You’re welcome.
Sorry, but we don’t recommend to change width of images as they will be stretched and displayed distorted. If you wish you can try it with this code adding in custom.css:
.product-image .img-wrapper img {
width: 600px !important;
max-width: 600px !important;
}
Regards,
Eva Kemp.
http://www.weightregulator.com/?product=3-days-juice-fast, this pages images overlap with text how to fix this problem
Please add this code into custom.css:
#product-page .product-shop {
margin-left: 50px;
}
Regards,
Eva Kemp.
Really you are very helpful i am very very happy for your services one more thing
can you fix my order now pages my home page is now alright just order now page please
the link is
http://www.weightregulator.com/?post_type=product
Thank you for your feedback!
Please add the following code in custom.css file:
.with-sidebar #products-grid.products_grid.rows-count4 .product-image img {
max-width: 160px !important;
}
Regards,
Eva Kemp.
Thank you very much
You’re welcome.
Regards,
Eva Kemp.
Hi, my site is http://www.weightregulator.com/ without any reason home page slide show is nit displaying . what can i do ? please help me .it was 100% okay.
Home pages code is
<div>[rev_slider slimjuice1]</div>
<div>
<div></div>
<div>[layerslider id=”1″]</div>
</div>
<div class=”banner one-half”>
[text-blocks id=”weight-loss” plain=1]
[etheme_btn title=”” url=”http://www.weightregulator.com/?page_id=517″ class=”active”]</div>
<div class=”banner one-half last”>
page_id=515″ class=”active”]</div>
<div class=”clear”></div>
[etheme_featured]
[etheme_new title=”Latest Products” ]
Hello,
You have inserted two different sliders, this causes a conflict.
1) <div>[rev_slider slimjuice1]</div>
2) <div>[layerslider id=”1″]</div>
Regards,
Robert Hall.
it was ok before . now i add one code but still now not showing how can i solve this .please help?
Hello,
You were using incorrect shortcode for the slider – [rev_slider slimjuice1], I’ve changed it to [rev_slider slimjuice]. Now the slider is showing on the Home page, but you don’t have any slides. You need add them in admin panel > Revolution Slider > Edit Slides.
Regards,
Eva Kemp.
yes but my slide is no 4 if you go admin panel you can see 2 slide i like to use[ rev_slider slimjuice1] slide , here all images text are present. please look carefully and help me. before it was ok. there is 2 slide no 3 and 4 i like to use slide 4 that one i have created.
Hello,
I’ve just updated the Revolution Slider plugin and it’s started showing, but there is some conflict. We recommend you to disable 3rd-party plugins one by one to check if some is causing the issue.
Thank you.
Regards,
Eva Kemp.
thank you very much. it is ok now
You’re welcome.
Regards,
Eva Kemp.
hi , my order now pages i need to add left and right padding for http://www.weightregulator.com/?post_type=product pages where i need to add code .i like to do that images are not overlape with border.
The issue related to '‘Resize the product on home page and create border images and content’' has been successfully resolved, and the topic is now closed for further responses