Return to previous page

Resize the product on home page and create border images and content

This topic has 36 replies, 4 voices, and was last updated 10 years, 3 months ago ago by Jack Richardson

GlobalEduLink

Participant

July 28, 2014 at 10:54

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??

#10975 Copied

35 Answers

Robert Hall

Support staff

July 28, 2014 at 11:22

Hello,

Please provide us with link to the page and wp-admin access.

Regards,
Robert Hall.

#10978 Copied

GlobalEduLink

Participant

July 28, 2014 at 14:21

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

#11024 Copied

GlobalEduLink

Participant

July 28, 2014 at 14:30

http://www.weightregulator.com/

Please, contact administrator
for this information.

#11028 Copied
Robert Hall

Support staff

July 28, 2014 at 14:55
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.
#11032 Copied
GlobalEduLink

Participant

July 28, 2014 at 16:13

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

#11054 Copied
Eva Kemp

Support staff

July 29, 2014 at 11:20
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.
#11156 Copied
GlobalEduLink

Participant

July 29, 2014 at 11:28

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

#11159 Copied
Eva Kemp

Support staff

July 29, 2014 at 11:49
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.
#11167 Copied
GlobalEduLink

Participant

July 29, 2014 at 12:28

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 ?

#11180 Copied
Eva Kemp

Support staff

July 29, 2014 at 12:59
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.
#11192 Copied
GlobalEduLink

Participant

July 29, 2014 at 16:04

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

#11239 Copied
Eva Kemp

Support staff

July 29, 2014 at 18:04
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.
#11268 Copied
GlobalEduLink

Participant

July 31, 2014 at 10:46

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

#11481 Copied
Eva Kemp

Support staff

July 31, 2014 at 11:07
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.
#11490 Copied
GlobalEduLink

Participant

July 31, 2014 at 11:38

http://www.weightregulator.com/?product=3-days-juice-fast, this pages images overlap with text how to fix this problem

#11495 Copied
Eva Kemp

Support staff

July 31, 2014 at 11:42
Please add this code into custom.css:
```
#product-page .product-shop {
    margin-left: 50px;
}
```
Regards,
Eva Kemp.
#11496 Copied
GlobalEduLink

Participant

July 31, 2014 at 12:09

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

#11497 Copied
Eva Kemp

Support staff

July 31, 2014 at 12:59
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.
#11500 Copied
GlobalEduLink

Participant

July 31, 2014 at 13:39

Thank you very much

#11507 Copied

Eva Kemp

Support staff

July 31, 2014 at 13:51

You’re welcome.

Regards,
Eva Kemp.

#11508 Copied

GlobalEduLink

Participant

July 31, 2014 at 21:57

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” ]

#11549 Copied

Robert Hall

Support staff

August 1, 2014 at 06:28

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.

#11560 Copied

GlobalEduLink

Participant

August 1, 2014 at 08:20

it was ok before . now i add one code but still now not showing how can i solve this .please help?

Please, contact administrator
for this information.

#11566 Copied

Eva Kemp

Support staff

August 1, 2014 at 08:26

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.

#11567 Copied

GlobalEduLink

Participant

August 1, 2014 at 09:02

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.

#11569 Copied

Eva Kemp

Support staff

August 1, 2014 at 09:40

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.

#11571 Copied

GlobalEduLink

Participant

August 1, 2014 at 09:59

thank you very much. it is ok now

#11573 Copied

Eva Kemp

Support staff

August 1, 2014 at 10:00

You’re welcome.

Regards,
Eva Kemp.

#11574 Copied

GlobalEduLink

Participant

August 6, 2014 at 15:52

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.

#11930 Copied
1 2

Viewing 30 results - 1 through 30 (of 36 total)

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

Resize the product on home page and create border images and content

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection