Shop page questions

[Joanna]

Hi there, I would like to kindly ask you for help with couple of questions about the shop product page: http://www.varrojoanna.com/product/just-married-books-movie-lover/

1. How do I get the image description to go below the image? Now it is overlapping the image and it is not visible.
2. I have set in WooCommerce in Settings->Product->Display the Single Product Image to be 600×600 but it is not. How can I do that?
3. How can I move all the text about the product to move under the image?
4. Where do I set the Description and Additional Information sections for the product?
5. Is it possible to move the SKU, Category and Tags area below the social media share? Or to disable it totally?

Thank you for your time,

Joanna

[Kyle – SUPPORT]

Hi

1) Unfortunately it’s not possible as the content is within the image area

2) The image is 562×562, are they your settings? The setting is only for the actual size of the image, however it will be resized to the div that contains it

3) You would have to set the product image area to full width, by adding this css to Theme Options > Custom CSS:

.woocommerce div.product div.images {
  width: 100%;
}.woocommerce div.product div.summary {
  float: left;
  width: 100%;
}

4) The Description is set in main content area when editing a product, additional info is produced by WooCommerce using things like attributes, weight, dimensions etc that are all set in the Product Meta

5) Add this to your custom css:

.product_meta {
  display: none;
}

– Kyle

[Joanna]

Hi there,

Thank you for your reply.

1. Would it be possible to at least give it a white background so it is visible?
2. The image is 600×600 and this are my settings. How can I make this specific size? Point 3 solved it a bit and made image bigger but now it is 660×660 which stretches the image.
3. Worked perfectly!
4. Perfect, thanks!
5. Perfect, thank you for the code, found even better solution, just made it way smaller.

6. I also have a new question, is it possible to make the sidebar width shorter?

Thank you,

Joanna

[Kyle – SUPPORT]

1) Sure, add this to your custom css:

.flexslider li .img-caption {
  background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
  padding: 2px 10px;
}

2) Go to dante/woocommerce/single-product/product-image.php and edit line 71:

$image = sf_aq_resize( $image_link, 562, NULL, true, false);

to

$image = sf_aq_resize( $image_link, 660, NULL, true, false);

6) Unfortunately not sorry

– Kyle

[Joanna]

And how can I get to this place: 2) Go to dante/woocommerce/single-product/product-image.php and edit line 71:

Thanks,

Joanna

[Kyle – SUPPORT]

Using FTP like filezilla

– Kyle

[Joanna]

Hi there,

I have finally manage to do according to your instructions but unfortunately nothing changed.
Any other ideas?

Thanks,

Jo

[David Martin – Support]

Please add your FTP details and I’ll check this.

– David.

[Joanna]

This reply has been marked as private.

[David Martin – Support]

@Joanna I need the password for the FTP.

Thanks.

[Joanna]

This reply has been marked as private.

[David Martin – Support]

Before I touch anything is this for the directory /handmadewedding/ or the root /varrojoanna/ ?

Thanks.

[Joanna]

Hi there,

It is for the subdomain varrojoanna.

Thanks,

Jo

[David Martin – Support]

Hi,

The image is enlarged to fill the space, really your images should be a minimum of 660×660.

You can stop the images filling the space by using this in Theme options => Custom CSS:

.woocommerce div.product div.images {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    float: none;
}

[Joanna]

Lovely, that solved the problem! Thank you very much!

Could you please also recommend me how can I change the caption styling we did for mobile?
I tried the below code but it did not work.

http://www.varrojoanna.com/product/just-married-card-for-basketball-and-gym-lover-copy/

@media only screen and (max-width: 767px) {
.flexslider li .img-caption {
font-size: 10px !important;
line-height: 12px !important;
}
}

Joanna

Attachments:

You must be logged in to view attached files.