Tagged: , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 31, 2015 at 8:12 pm #496066
    BelIblis

    Hi guys,

    I’m finally updating my website, which is still running Enfold Version 2.5 ;)
    When I created the website 2 years ago, I changed some code to make the product image on the Single Product page wider:

    config-woocommerce/config.php:

    # wrap single product image in an extra div
#
add_action( 'woocommerce_before_single_product_summary', 'avia_add_image_div', 2);
add_action( 'woocommerce_before_single_product_summary',  'avia_close_image_div', 20);
function avia_add_image_div()
{
	echo "<div class='four units single-product-main-image alpha'>";

    That last line, I had changed to
    echo "<div class='four units single-product-main-image alpha'>";

    With the current version of Enfold, the code for this seems to have changed: The “single-product-main-image alpha” is still there, but without the “units” prefix.

    Question now is:
    With the latest Enfold version installed: How can I make the product image wider, so it takes up half the page width?
    I’m not a coder… what I achieved above was basically some research and then trial & error ;) )

    The only way to do this so far is with CSS:
    .single-product-main-image { width: 50%!important; }

    Is this the way to go? Or is there an option to do this via php?

    Thank you :)

    • This topic was modified 9 years, 2 months ago by BelIblis.
    September 1, 2015 at 8:46 am #496299
    Rikard

    Hi BelIblis,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    September 1, 2015 at 11:57 am #496366
    BelIblis

    I only have a link to the old one (running Enfold 2.5.2). Would this be enough for you?
    (The new one is still on localhost only).

    September 1, 2015 at 6:47 pm #496611
    Yigit

    Hi!

    No, old version would not help.
    Custom CSS code you have used is correct. Currently, that is the way to go :)

    Best regards,
    Yigit

    September 1, 2015 at 6:50 pm #496616
    BelIblis

    Cool. Thanks!

    September 1, 2015 at 6:53 pm #496620
    Yigit

    Hey!

    You are welcome! Let us know if you have any other questions or issues :)

    Cheers!
    Yigit

    April 28, 2017 at 5:57 pm #784739
    BelIblis

    Hi,

    I’ve just updated to the latest Enfold version. The problem still exists…

    Could you please have a look at the link I provided below?
    I’d like to make the image wider, and the info-box next to it narrower. Basically: 1/2 column image and 1/2 column info-box.

    I’ve changed
    <div class='single-product-summary'> and <div class="single-product-summary">
    to
    <div class='six units single-product-summary'> and <div class="six units single-product-summary">

    I’ve also tried “three units”, “four units”, etc… but no matter what I do, it doesn’t work. The image appears far too big and stretches across the entire page…

    Note:
    I’m using a slightly modified woocommerce/content-single-product.php
    It basically allows me to stretch the description/information/rating tabs across the full page width
    The modified code is in the last two lines:

    /**
 * woocommerce_single_product_summary hook.
 */
do_action( 'woocommerce_single_product_summary' );
echo '<br><br><br>';
echo '</div>';

    Thought I’d mention it. But since this is all happening AFTER the product image, I don’t think this is the reason why the “six units” thing doesn’t work…

    Thanks a lot for your help!

    May 1, 2017 at 6:46 am #785526
    Rikard

    Hi,

    Please refer to this thread: https://kriesi.at/support/topic/woocommerce-3-0-03-0-1-and-the-images-issue/

    Best regards,
    Rikard

    May 1, 2017 at 11:51 am #785655
    BelIblis

    Hi RIkard,

    I read through the entire thread you linked to. But I don’t think the information there is related to my problem. I mean: my problem is not about image or thumbnail quality. It is about the actual layout grid:

    Enfold’s default single-product page layout is:
    1/3 single-product-main-image DIV — 2/3 single-product-summary DIV

    I would like to change this to:
    1/2 single-product-main-image DIV — 1/2 single-product-summary DIV

    In the past, I was able to achieve this by adding the words “six units” in front of both DIV classes. (Or, likewise “four units” and “eight units”).
    But now, this doesn’t do the trick anymore.

    Would appreciate if you could help with this.
    Thank you!

    May 2, 2017 at 9:02 am #786226
    Ismael

    Hi,

    Please remove the modification then add the following css code to increase the width of the product image container.

    .single-product-main-image {
    width: 45%;
    float: left;
    margin-right: 50px;
    overflow: hidden;
    padding-bottom: 50px;
}

    Adjust the values as needed.

    Best regards,
    Ismael

    May 2, 2017 at 10:57 am #786272
    BelIblis

    Thanks Ismael! Works fine!
    Just for future reference, so I understand things properly: Has the Enfold code changed, so the “six units” trick is not possible anymore?

    May 3, 2017 at 2:57 am #786835
    Ismael

    Hi,

    I don’t think the layout has change a lot since. The “six units” class attribute is not required because there are only two sections inside the product container and the width is already specified in the stylesheet.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.