Connecting button link to product variations in WooCommerce product?

[WillWashington]

I would like to connect the buttons on the left (Bronze, silver, gold) when pressed, open in the iframe (seen in red) the product with the variation accordingly, however I do not see how to link to load variation options. I have selected Bronze as the default but can only find a URL link for the product in general “product/web-design” but can’t find URL links to automatically have other variations selected.

My question: In order to use the 3 buttons on the side to load the different program options (bronze, silver, gold) do I need to make 3 separate products for the “web design” product, or is there a way to link to the variations directly from these buttons? I already know about targeting the link to the iframe name, I’m trying to get the links to product variations.

I have attached an image to help you guys understand what I’m talking about

https://easystartup.net/products-services/

[rad]

Hi William,

Thanks for reaching out.

With the linking (URL), it’s not possible. It has to be dynamic to work and would require custom development. Your only option would be adding a single product for each instead of variation.

Though, you can try some plugins like this https://demos.iconicwp.com/woocommerce-linked-variations/product/iphone-x-space-grey-64gb/ (paid version). Or these https://wordpress.org/plugins/simple-linked-variations-for-woocommerce/, https://wordpress.org/plugins/woocommerce-direct-variation-link/

And with those, you’ll have to contact each respective authors if you have questions

Thanks!

[WillWashington]

First of all THANK YOU for the very fast response, secondly many thank you’s for providing some options outside of your realm of support that I can look into to get this done as well as answering my main question of the two ways to achieve it. Have a great weekend.

[WillWashington]

So I discovered how to find direct links to my product attributes, for example:

Web Design · EasyStartUp.net

but in the Button editor in Pro I can’t see where to set the target of that button? Can you help me please? I’m looking at the Inspector > Button > Link section

as can be seen of the buttons on my screen shot above

It occurred to me if it can not be targeted within the button element I may need to use a shortcode for the buttons in the place of the elements (like seen on http://demo.theme.co/ethos-1/shortcodes/buttons/) - if that is the case and I can not set the target=“iframe_example” in the button element, could you please help me build a shortcode to match the buttons I have built out with those elements? Thank you again in advance.

[WillWashington]

One more question also while I have your attention:

How can I remove this hamburger button from the products page?

Also: how can I centre the product image as oppose to having it pushed to the left?

[rad]

Hi William,

You mean the target blank attribute for links? If yes, then you have to toggle on the New Tab option. New tab is always equal to _blank target.

But with the iframe as a target, it’s not possible with the current button element. So as temporary workaround, please add this code to Theme Options > JS (just once)

jQuery ( function($) {
$('.product_target_iframe').attr('target', 'iframe_example');
} );

Then simply inspect each of your button and go to Customize section and add product_target_iframe to the class input field.

Then from now on, any button with class product_target_iframe will automatically change the target to iframe_example (eg. target="iframe_example" )

BUT, these aren’t going to work either, it’s because your page design has nested iframe which will prevent this to work.

This main page https://easystartup.net/products-services/ has iframe for https://easystartup.net/web-design/, which then has iframe for https://easystartup.net/product/web-design/

Implement that changes and load this https://easystartup.net/web-design/ and test the buttons, it will work since it only has single iframe. And this is true even with standard link codes (eg.<a></a>) and iframes. This restriction isn’t theme or button’s limitation ( I tried it with simple HTML contents ).

About the hamburger button, please add this code to your child theme’s functions.php

  function x_ethos_entry_top_navigation() {

    if ( x_is_portfolio_item() ) {
      $link = x_get_parent_portfolio_link();
    } elseif ( x_is_product() ) {

      return false; //Don't display it

    }

    $title = esc_attr( __( 'See All Posts', '__x__' ) );

    ?>

      <div class="entry-top-navigation">
        <a href="<?php echo $link; ?>" class="entry-parent" title="<?php $title; ?>"><i class="x-icon-th" data-x-icon-s="&#xf00a;"></i></a>
        <?php x_entry_navigation(); ?>
      </div>

    <?php

  }

And for centering the image, please add this CSS to Theme Options > CSS

.single-product div.product .images {
    text-align: center !important;
}

Hope these help.

[WillWashington]

Those were very helpful, based on that code I have made this: https://easystartup.net/web-design/

• I have a few questions I hope you can help me with to finish this section of the site:

1. You can see there is a scroll bar inside the iframe, no matter how big (height wise) I make it, the scroll bar stays. I have also added scrolling=“no” into the iframe (my code is below) when I tried “yes” it had 2x scrollbars.

2. in the green circled area you can see the text is pushed to the right and at the edge so it appears hard to read, how can I keep this aligned so it looks good in the column with the icons aligned but the text its self is aligned closer to the image? (left) instead of pushed to the right side as you see in the screen shot

3. in the yellow area you see the gap as it appears on the actual site is quite large, I’ve enabled margin less columns however it doesn’t help the spacing also there is no padding between them in the settings. I’d like to have them closer together with a more normal spacing of maybe 75px for example.

Basically I need some help cleaning up the iframe if you see any other issues that could help me and I will learn in the process I would be so grateful.

[ruenel]

Hello William,

Thanks for updating in!

1. Please remove the Related products so that it does not exceeds the height of the iframe. You can disable it in X > Theme Options > WooCommerce > Single Product. This should remove the scrollbars on the iframe.

2. The text is pushed to the left side because you have a very width container size at 2500px. Please go to X > Theme Options > Layout & Design and set the “Site Max Width” to at least 1200px only.

3. The white space actually originated from your single product page. If you want to reduced it, like this:
   

Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.single-product.woocommerce div.product .images {
    width: 35%;
}

.single-product.woocommerce div.product .summary {
    width: 61%
}

Hope this helps.

[WillWashington]

In response to 2) what is the ideal width to set the website too? I’ve noticed when building on 1500 width for example the site doesn’t appear right on larger screens. What would be the ideal width for this in this case? as I want a full width site

I will put some time into the other two solutions and respond back how it went, thank you again

In response to 3)

.single-product.woocommerce div.product .images {
width: 35%;
}

.single-product.woocommerce div.product .summary {
width: 61%
}

should I replace .single-product with the type of product it is? like variable product? or do I change this to the product slug name?

[ruenel]

Hello William,

Usually the ideal width of the site is 1200 pixels. The most number of screens is within this range. Having 2500 pixels is wide enough which may not look like in most screens. In desktop screens, this would mean that the contents will be at the leftmost or rightmost part of the screen which is currently visible in your screenshot.

“should I replace .single-product with the type of product it is? like variable product? or do I change this to the product slug name?”

• No, you don’t because .single-product is the body class of the single product pages.

Hope this helps.