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, 6 months ago ago by Jack Richardson

  • Avatar: GlobalEduLink
    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
    Avatar: Robert Hall
    Robert Hall
    Participant
    July 28, 2014 at 11:22

    Hello,

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

    Regards,
    Robert Hall.

    #10978 Copied
    Avatar: GlobalEduLink
    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
    Avatar: GlobalEduLink
    GlobalEduLink
    Participant
    July 28, 2014 at 14:30

    http://www.weightregulator.com/

    Please, contact administrator
    for this information.
    #11028 Copied
    Avatar: Robert Hall
    Robert Hall
    Participant
    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
    Avatar: GlobalEduLink
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: GlobalEduLink
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: GlobalEduLink
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: GlobalEduLink
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: GlobalEduLink
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: GlobalEduLink
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: GlobalEduLink
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: GlobalEduLink
    GlobalEduLink
    Participant
    July 31, 2014 at 13:39

    Thank you very much

    #11507 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    July 31, 2014 at 13:51

    You’re welcome.

    Regards,
    Eva Kemp.

    #11508 Copied
    Avatar: GlobalEduLink
    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&#8243; 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
    Avatar: Robert Hall
    Robert Hall
    Participant
    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
    Avatar: GlobalEduLink
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: GlobalEduLink
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: GlobalEduLink
    GlobalEduLink
    Participant
    August 1, 2014 at 09:59

    thank you very much. it is ok now

    #11573 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    August 1, 2014 at 10:00

    You’re welcome.

    Regards,
    Eva Kemp.

    #11574 Copied
    Avatar: GlobalEduLink
    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

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
WooPress – Responsive Creative HTML5 Template
lazy-placeholder
Electronic Mega Market – WordPress WooCommerce Theme
lazy-placeholder
Business 02 – WordPress WooCommerce Theme
lazy-placeholder
Lingerie Store – WordPress WooCommerce Theme
lazy-placeholder
HandMade Store – WooCommerce Theme
lazy-placeholder
Mango – Responsive eCommerce PSD Template
lazy-placeholder
Web Agency – WordPress WooCommerce Theme
lazy-placeholder
Grocery Market – Multivendor WP WooCommerce Theme
lazy-placeholder
Bike Store – WordPress WooCommerce Theme
lazy-placeholder
Marseille 03 – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.