Shop Page Row Display

Home Forums Sweetdate – WordPress Shop Page Row Display

This topic has 23 replies, 2 voices, and was last updated 9 years by Laura.

  • Author
  • March 2, 2015 at 03:56 #48316
     iosefl
    Participant

    Hi,
    Would like to have the shop page/products displayed horizontally http://gyazo.com/cfbd33b24efd29bf09aec046b5bc0285, one product per row,
    instead of 3 products per row http://gyazo.com/f50b0bbf5a4797029c9d3804d640f1bf
    Also would like to remove the “Default Sorting” drop-down box and the “Showing All Results”
    Thanks for your help.
    Joseph

    March 3, 2015 at 05:47 #48495
     Laura
    Moderator

    Hello, can you share your website link so we can check it out? 🙂

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    Laura Solanes - Graphic Designer and Web Designer

    Please be patient as I try to answer each topic as fast as i can.

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Always happy to help you 🙂

    March 3, 2015 at 15:22 #48541
     iosefl
    Participant

    Hi,

    Sorry forgot to do that, here it is:
    http://www.lamourdatinghk.com
    The Shop page is Events:
    http://www.lamourdatinghk.com/shop/

    Thanks,

    Joseph

    March 4, 2015 at 02:27 #48680
     Laura
    Moderator

    Hello, please add this to your quick css or style.css in child theme, if you want any change just let me know 🙂

    COPY CODE
    
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
float: left;
display: inline-block;
float: left;
margin: 0 40.8% 2.992em 0;
padding: 5px;
position: relative;
width: 33.30%;
margin-left: 30%;
}
.woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count {
display: none;
}
.woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering {
display: none;
}
    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    Laura Solanes - Graphic Designer and Web Designer

    Please be patient as I try to answer each topic as fast as i can.

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Always happy to help you 🙂

    March 4, 2015 at 16:13 #48749
     iosefl
    Participant

    Hi,

    Added the code to the custom style, first part looks excellent thank you 🙂
    http://gyazo.com/21c3b0d6e71f857983a9818549f4ac64

    Is it possible to have the image on the left side while the short text description to the right of the image, in the middle of the same line and the price/add to cart link on the right side of the same line, like in this image I created:
    http://gyazo.com/5e782d89aa2ec25769b02703177c3694

    I just need to find a way to make the description text in the middle a little bigger to cover most of the middle line and remove the borders as I did in my screenshot

    Thanks

    March 6, 2015 at 22:08 #49020
     Laura
    Moderator

    Hello, use this code 🙂 same as the first one

    COPY CODE
    
.woo-item-grid {
border: none !important;
border-radius: 6px;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
margin-left: 0% !important;
}
.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
width: 35% !important;
height: auto;
display: block;
margin: 0 0 8px;
-webkit-transition: all ease-in-out .2s;
-moz-transition: all ease-in-out .2s;
-o-transition: all ease-in-out .2s;
transition: all ease-in-out .2s;
border-bottom: 0 !important;
border-radius: 6px 6px 0 0;
}
.woo-info-item-grid {
min-height: 80px;
padding: 0 5px 5px;
position: relative;
text-align: center;
display: inline-block;
width: 50%;
float: right;
margin-right: 20%;
margin-top: -20%;
font-size: 20px;
}
.woo-info-buttons {
border-top: none !important;
padding: 5px 0;
text-align: center;
display: inline-block;
width: 200px;
float: right;
margin-right: -10%;
margin-top: -19%;
}
.woocommerce ul.products li.product a, .woocommerce-page ul.products li.product a {
text-decoration: none;
font-size: 17px;
}
.woocommerce .products ul, .woocommerce-page .products ul, .woocommerce ul.products, .woocommerce-page ul.products {
margin: 0 0 1em;
padding: 0;
list-style: none outside;
clear: both;
margin-left: -10%;
}
    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    Laura Solanes - Graphic Designer and Web Designer

    Please be patient as I try to answer each topic as fast as i can.

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Always happy to help you 🙂

    March 11, 2015 at 13:59 #49674
     iosefl
    Participant

    Hi Laura,

    I applied all your suggested code, it does do the job by moving the text to the right of the product image, but it’s all squeezed near the image, please see screenshot:
    http://gyazo.com/7876af91754b887dc57106c1d70491a4
    URL: http://www.lamourdatinghk.com/shop/

    Can you please help me spread out the text more to the right and the Add to Cart button to the far right so the whole row is evenly spread out as the page width, like in this screenshot:
    http://gyazo.com/5e782d89aa2ec25769b02703177c3694

    Thanks,

    Joseph

    March 14, 2015 at 06:17 #50120
     Laura
    Moderator

    Hello, please share an admin account so i can adjust it 🙂

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    Laura Solanes - Graphic Designer and Web Designer

    Please be patient as I try to answer each topic as fast as i can.

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Always happy to help you 🙂

    March 14, 2015 at 16:31 #50141
     iosefl
    Participant
    This reply has been set as private.
    March 17, 2015 at 21:19 #50576
     Laura
    Moderator

    Hello, i cannot login, its ok, i will create the css by viewing your page

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    Laura Solanes - Graphic Designer and Web Designer

    Please be patient as I try to answer each topic as fast as i can.

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Always happy to help you 🙂

    March 17, 2015 at 21:54 #50578
     Laura
    Moderator

    Hello, please use this:
    Replace the .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img css for this

    COPY CODE
    
.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
  width: 400px !important;
  height: auto;
  display: block;
  margin: 0 0 8px;
  -webkit-transition: all ease-in-out .2s;
  -moz-transition: all ease-in-out .2s;
  -o-transition: all ease-in-out .2s;
  transition: all ease-in-out .2s;
  border-bottom: 0 !important;
  border-radius: 6px 6px 0 0;
}

    Replace the .woo-info-item-grid css for this

    COPY CODE
    
.woo-info-item-grid {
  min-height: 80px;
  padding: 0 5px 5px;
  position: relative;
  text-align: center;
  display: inline-block;
  width: 120%;
  float: right;
  margin-right: -150%;
  margin-top: -50%;
  font-size: 24px;
}

    And .woo-info-buttons for :

    COPY CODE
    
.woo-info-buttons {
  border-top: none !important;
  padding: 5px 0;
  text-align: center;
  display: inline-block;
  width: 200px;
  float: right;
  margin-right: -240% !important;
  margin-top: -44% !important;
}
    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    Laura Solanes - Graphic Designer and Web Designer

    Please be patient as I try to answer each topic as fast as i can.

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Always happy to help you 🙂

    March 18, 2015 at 15:39 #50706
     iosefl
    Participant

    Hi Laura,

    Thank you very much, it worked and it looks much better:
    http://www.lamourdatinghk.com/shop/

    I don’t know why you can’t login, perhaps it’s the Firewall, but you did provide me the correct code and it works.

    Is it possible for me to add some more description text in the middle, I noticed this is the actual title of the Product and it’s pretty short, would be more useful to the end user to display a small excerpt/additional description text just bellow the Product title on the Shop page?

    Thanks,

    Joseph

    March 21, 2015 at 15:34 #51037
     iosefl
    Participant

    Hi Laura,

    How can I add some short description below the product title for each product on the Shop page?

    Thanks,

    Joseph

    March 24, 2015 at 17:01 #51344
     iosefl
    Participant

    Any way I can add some short description text below the product title for each product on the Shop page:
    http://www.lamourdatinghk.com/shop/
    and cut the product image size as it’s way too big (height)?

    Thanks

    March 29, 2015 at 02:47 #51990
     Laura
    Moderator

    Hello, as is woocommerce who creates this, try this https://wordpress.org/support/topic/how-to-add-product-description-to-category-or-shop-page and let me know if it works.
    For the image, let me know what height you want?

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    Laura Solanes - Graphic Designer and Web Designer

    Please be patient as I try to answer each topic as fast as i can.

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Always happy to help you 🙂

    March 29, 2015 at 05:46 #52031
     iosefl
    Participant

    Thank you Laura,

    I checked that link as well as many others, the problem is that is using the actual template so the Shop page will show same description for each product.

    I found a plugin WooJet that allows to add description for product on Shop page, but to use separate the description for each product I use the custom field %total-sale%, this way for each product I set different values for this field, so far it works!!!

    You provided me with some very important code, in this support post, to set the product title for each product in the middle of each row. Where in your code I can increase the % of this part of the page, I have the short description just below the title and in some browsers it wraps to second line?
    Also the Buy Now (former Add to Cart, I changed the text) in Chrome has no background while in Firefox it does so when mouse over in Chrome the whole link disappears (it’s white text). It should show the background regardless of the browser, can this be fixed?

    Thanks,

    Joseph

    March 29, 2015 at 05:54 #52036
     Laura
    Moderator

    Will check it out now

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    Laura Solanes - Graphic Designer and Web Designer

    Please be patient as I try to answer each topic as fast as i can.

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Always happy to help you 🙂

    March 29, 2015 at 06:02 #52038
     Laura
    Moderator

    Hello, this is what i see in firefox
    If you do not see this, try to update your browser 🙂

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    Laura Solanes - Graphic Designer and Web Designer

    Please be patient as I try to answer each topic as fast as i can.

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Always happy to help you 🙂

    Attachments:
    You must be logged in to view attached files.
    March 29, 2015 at 06:19 #52049
     iosefl
    Participant

    Firefox is perfect, this is what I see too, the problem was with Chrome, but suddenly looks like is now fine, I can see the same for the Buy Now button, only the text description below the product title wraps in Chrome (added screenshot)

    Would be great to “expand” the middle part os the Title and Description below the title, than I can increase the font size without being afraid to wrap the text, but I’m not sure where to do that in your code.

    For the images, I checked the actual product image size versus my original images size and I made my images a little bigger that made sure I changed the catalog/shop/thumbnail sizes and check marked to crop them and they now look pretty good.
    If I want to make the images a bit smaller, where can I find in the SweetDate theme the image sizes for the products so I can make them a little smaller?

    Thanks

    Attachments:
    You must be logged in to view attached files.
    March 30, 2015 at 01:13 #52111
     Laura
    Moderator

    Hello, in chrome, i added screenshot. What you see is because of the resolution of your screen, if the screen is small it will change the size so it looks better, i use a generic laptop as see the attachment

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    Laura Solanes - Graphic Designer and Web Designer

    Please be patient as I try to answer each topic as fast as i can.

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Always happy to help you 🙂

    Attachments:
    You must be logged in to view attached files.
    March 30, 2015 at 15:08 #52223
     iosefl
    Participant

    I guess you’re right, I’m using 15.6″ screen on MacBook and Chrome comes like that while Firefox comes up wider so it’s fine, thank you Laura.

    Could you please just let me know where can I adjust product images sizes in case I need to shrink the images?
    Right now the theme’s CSS makes them 337×222 on the Shop/catalog page (natural size is 350×230) and 455×300 on the single product page (natural size is 457×301), I might need to make the product images smaller on the Shop page and on the single product page, I’ll keep my versions of them (natural) the same, but I want to adjust the theme product image sizes, if necessary

    March 31, 2015 at 15:55 #52397
     Laura
    Moderator

    Hello, the codes i sent you should help, for shop page use

    COPY CODE
    
.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
  width: 400px !important;
  height: auto;
  display: block;
  margin: 0 0 8px;
  -webkit-transition: all ease-in-out .2s;
  -moz-transition: all ease-in-out .2s;
  -o-transition: all ease-in-out .2s;
  transition: all ease-in-out .2s;
  border-bottom: 0 !important;
  border-radius: 6px 6px 0 0;
}

    Change 400px for the width of the image and let height auto

    For Single product page. use

    COPY CODE
    
.woocommerce div.product div.images img, .woocommerce-page div.product div.images img, .woocommerce #content div.product div.images img, .woocommerce-page #content div.product div.images img {
  display: block;
  width: 100%;
  height: auto;
}

    100% Is the default now, change it for a % or a px, as you want

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    Laura Solanes - Graphic Designer and Web Designer

    Please be patient as I try to answer each topic as fast as i can.

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Always happy to help you 🙂

    March 31, 2015 at 16:12 #52409
     iosefl
    Participant

    Much appreciated Laura, these come handy to “play” with product image sizes, will test them out, thanks

    April 1, 2015 at 07:48 #52656
     Laura
    Moderator

    Glad it helped 🙂

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    Laura Solanes - Graphic Designer and Web Designer

    Please be patient as I try to answer each topic as fast as i can.

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Always happy to help you 🙂

  • Author
    Posts
Viewing 24 posts - 1 through 24 (of 24 total)

The forum ‘Sweetdate – WordPress’ is closed to new topics and replies.

Support Hours Our support team is available from Monday to Friday during regular office hours ( East European Time ). Please allow up to 48hrs so we can review your request and respond.
License info One theme purchase allows you to use it only on one WordPress install, so each new install requires a new license. We thank and appreciate everyone for their purchase as it allows us to keep supporting and releasing new updates.
wp-theme-installation-service

©2024 SeventhQueen - Powered by KLEO Theme

Terms & conditions | Privacy Policy

Log in with your credentials

Forgot your details?