Woocommerce Product Display / Images

[dej888]

Hey team!

I just purchased the theme and am learning all about it. So far so good, just a few questions.. First off, can you inform me if there is more documentation out here on the theme? I see only a handful of links.

Two questions:

1. How can I add the quick preview icon beside the add to cart, wishlist icons?

2. How do I extend a full width image on a page? I cant get this done as it shows in the demo samples? Can I please have some guidance on this.

That’s all for now! Thank you for the support 🙂

[Kyle – SUPPORT]

Hi

1)

a) Install the quickview plugin
b) Enable quickview in theme options > woocommerce options
c) If it’s not showing on the front end, go to WooCommerce Quickview Settings and make sure the position is ‘After Item’

2) Add a row to your page using the page builder, in the row settings add the image as the background

– Kyle

[dej888]

Hi Kyle,

Thank you for your reply 🙂

Can you confirm other features with woocommerce and product display please.

1. how do you add the quantity +/- number on the product for the front end on the shop page, like it shows once you preview the product?

2. how can you add the button quick preview text in the image once the cursor goes over the product image? So it fades to opacity and then show the button for quickview?

3. in reference to question 2, how can I add the Add to Cart button in the product image? (currently it shows just the icons in the image once the cursor goes over the image)

4. how can I change the icons shown on the image for add to cart, wishlist, preview? (i know there are three different types you can choose from, but can you change the icons to anything using the 700+ other icons in the theme?

5. sign in/my account icons in top right corner of page. how can i change the icons here as well? and also show the text My Account/ Sign up/Sign in, instead of icons?

6. Is the swift slider and revolution slider the same plugin basically? what is the difference for the too?

looking foward to your reply and assistance! TY 🙂

[dej888]

one more thing 🙂

7. what does the plugin tab SPB Sections do?

[David Martin – Support]

1) Edit your product, check you have not selected this: Product Data => Inventory => Sold Individually (Uncheck)

2) Like the demo? Read these instructions and setup the Quick View settings so they match this image: http://swiftideas.com/documentation/wp-content/uploads/sites/2/2014/05/woo-quick.png

3) You want to show the button always, not just on hover? Please add this custom CSS to Theme Options => Custom CSS

4) You can select between the three types here: Theme Options => WooCommerce Options => Shop Icon Style. To change the icons to anything other then that will require you to upload and active your child theme and utilise some PHP functions which we can help your with.

5) This would require a developer as it’s a small customisation that I could not provide over the forum.

6) The Swift Slider has a more native WordPress feel, it’s simpler and very easy to use. Rev Slider is more complex and a steeper learning curve, but is very powerful.

7) You can create SPB section and use them within posts/pages ect. Avoids duplication and allows you to split up big pages if you want to do that.

Thanks.

[dej888]

Thank you David! This is very helpful.

New Question – how do I add the quantity +/- box to show in the following screen shot. You will see I built it on flock demo, I want it to sit under the add to cart button or above.

Previous Questions, additional help – your answers:

1) Edit your product, check you have not selected this: Product Data => Inventory => Sold Individually (Uncheck)
– i did this, all it shows the +/- is in the product page for the product, not on the shop or front page of the products.

2. how can you add the button quick preview text in the image once the cursor goes over the product image? So it fades to opacity and then show the button for quickview?

2) Like the demo? Read these instructions and setup the Quick View settings so they match this image: http://swiftideas.com/documentation/wp-content/uploads/sites/2/2014/05/woo-quick.png
Thanks!
– yes, but I want the text to show, not the icon. right now if I follow this step as you mentioned, it just shows the icon for quickview, how can I have it show a button that sits on the image when the cursor goes over the item?

3) You want to show the button always, not just on hover? Please add this custom CSS to Theme Options => Custom CSS
-can you provide me a source to find some css to input? I am a newby :/ 🙂

4) You can select between the three types here: Theme Options => WooCommerce Options => Shop Icon Style. To change the icons to anything other then that will require you to upload and active your child theme and utilise some PHP functions which we can help your with.
-yes, i would like to upload my own icon, can you provide a source to find some functions to implement in my child-theme to achieve this?

Thank you David.

Attachments:

You must be logged in to view attached files.

[dej888]

Another note: In the Atlier Demo, Page -> About Me. Under the About Me text on the image, there is a line that sits under the text. How can I add this line to place under text? I am using the Porter Demo.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) Unfortunalty that is not possible to do

2) Not sure I understand this, are you referring to a demo we have setup for this functionality?

3) A button that says QuickView and not a icon?

.product .cart-overlay .shop-actions .jckqvBtn:before,
.product .cart-overlay .shop-actions .jckqvBtn i { display: none; }
.product .cart-overlay .shop-actions .jckqvBtn { width: 102px; }

4) Add your CSS here: Theme Options => Custom CSS

.product figure .cart-overlay { opacity: 1; }

5) You cannot upload your own. You can use the icons that come with the theme. The functions are already in the child theme, have you activated this ?

6) Please enable the breadcrumbs, you can enable this within the Page => Meta Options

Thanks.

[dej888]

Thank you for your reply!

2) Not sure I understand this, are you referring to a demo we have setup for this functionality?

-i just want a button to show that says quick view, instead of the icon that shows on the hover. Is this possible?

3) A button that says QuickView and not a icon?
.product .cart-overlay .shop-actions .jckqvBtn:before,
.product .cart-overlay .shop-actions .jckqvBtn i { display: none; }
.product .cart-overlay .shop-actions .jckqvBtn { width: 102px; }

-is this the solution for my question 2?

.product .cart-overlay .shop-actions .jckqvBtn:before,
.product .cart-overlay .shop-actions .jckqvBtn i { display: none; }
.product .cart-overlay .shop-actions .jckqvBtn { width: 102px; }

4) Add your CSS here: Theme Options => Custom CSS

.product figure .cart-overlay { opacity: 1; }

– can you kindly confirm what this css is doing and where I can notice it on the site?

5) You cannot upload your own. You can use the icons that come with the theme. The functions are already in the child theme, have you activated this ?

-yes i have!, but where can i find the functions to change the icon?

6) Please enable the breadcrumbs, you can enable this within the Page => Meta Options

-yes i did this!, however how can you remove the site name>page name, so its gone and only shows the line? as in my picture above?

Thanks again David 🙂

[David Martin – Support]

Hi,

2 & 3) Yes it is possible with some custom CSS.

.product .cart-overlay .shop-actions .jckqvBtn:before {
    display: none;
}
.product .cart-overlay .shop-actions .jckqvBtn {
    text-indent: 0;
    font-size: 14px;
    padding: 21px;
    width: 120px;
}
.product .cart-overlay .shop-actions .jckqvBtn i {
    display: none;
}

4) This CSS is in relation to your question: “currently it shows just the icons in the image once the cursor goes over the image”. This will make the buttons always show regardless of if the user is hovering over the product image.

5) Within the child theme’s functions.php file. Please add your FTP details and I will create a screencast to show you in more detail.

6) You maybe able to do this with CSS, I’ll a need a page URL to help with this?

Thanks.