Move "configure button" to another page

[DGspan]

Hey Marc. Another quick question.

how to link the configurator modal on another button. E.g. a button on the mainpage wish say "start configuration" > Configurator PopUp shows up.

I'm sure the answer is obvious but i couldn't fin it out.

THANKS

[DGspan]

found the button shortcode but like to style the button myself so it fits the site style

[marcusig]

Hey,

You can add html classes using the classes attribute. E.g. [mkl_configurator_button product_id=1 classes="btn btn-primary"]Configure[/mkl_configurator_button] The classes to use will depend on your theme and plugins (e.g. Elementor or other page builders have their own button styles and classes, which you could use).

PS. I try to keep Github for bug reports / features, and encourage users to ask their questions on the WordPress forums https://wordpress.org/support/plugin/product-configurator-for-woocommerce/ or https://wc-product-configurator.com/ for premium plugins. This helps me organise and in the case of the WordPress forums, helps other users who may have the same questions.

[DGspan]

so basically you say, use the shortcode to generate a button. right? But in this case the button has almost no style options.

We use brizy builder and blocksy theme.

i‘ll use the wp forum for future questions like this 👍

Von meinem iPhone gesendet

Am 14.01.2022 um 18:11 schrieb Marc Lacroix @.***>:

 Hey,

You can add html classes using the classes attribute. E.g. [mkl_configurator_button product_id=1 classes="btn btn-primary"]Configure[/mkl_configurator_button] The classes to use will depend on your theme and plugins (e.g. Elementor or other page builders have their own button styles and classes, which you could use).

PS. I try to keep Github for bug reports / features, and encourage users to ask their questions on the WordPress forums https://wordpress.org/support/plugin/product-configurator-for-woocommerce/ or https://wc-product-configurator.com/ for premium plugins. This helps me organise and in the case of the WordPress forums, helps other users who may have the same questions.

— Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you authored the thread.

[marcusig]

But in this case the button has almost no style options.

Yes that shortcode adds a basic button. Adding classes, like I suggest above, will enable you to inherit the styles from blocksy / brizy. I unfortunately can't tell you what classes to use without seeing the page.

[DGspan]

Hey Marc. So it it possible to inherit the theme style in the button. This is the product. https://rocketguard.at/produkt/rocketguard-folierung/ https://rocketguard.at/produkt/rocketguard-folierung/

Can you help add the classes? What o you need?

Cheers, Daniel

Am 17.01.2022 um 06:33 schrieb Marc Lacroix @.***>:

But in this case the button has almost no style options.

Yes that shortcode adds a basic button. Adding classes, like I suggest above, will enable you to inherit the styles from blocksy / brizy. I unfortunately can't tell you what classes to use without seeing the page.

— Reply to this email directly, view it on GitHub https://github.com/marcusig/woocommerce-product-customizer/issues/45#issuecomment-1014158079, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXJFYH4JRMPWJPPJ4L3UOTLUWOS4FANCNFSM5L67WSEQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you authored the thread.

[marcusig]

So it it possible to inherit the theme style in the button.

Yes. On the product you linked, the theme uses the class button. So you can add that class to the shortcode:

[mkl_configurator_button product_id=1 classes="button"]Configure[/mkl_configurator_button] You'll then have to adjust the styles of the button via the customizer. At the moment the background color is black, so you won't see it agains the black background.

Have you put the shortcode on a page somewhere?

[DGspan]

I’m not sure to understand 100% but I’ll try right away.

Yes, I’ve the customizer on https://rocketguard.at/konfigurator/(öffnet in neuem Tab)

Am 17.01.2022 um 10:48 schrieb Marc Lacroix @.***>:

So it it possible to inherit the theme style in the button.

Yes. On the product you linked, the theme uses the class button. So you can add that class to the shortcode:

[mkl_configurator_button product_id=1 classes="button"]Configure[/mkl_configurator_button] You'll then have to adjust the styles of the button via the customizer. At the moment the background color is black, so you won't see it agains the black background.

Have you put the shortcode on a page somewhere?

— Reply to this email directly, view it on GitHub https://github.com/marcusig/woocommerce-product-customizer/issues/45#issuecomment-1014329441, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXJFYH26ROHWDFBXLYBRJDLUWPQW7ANCNFSM5L67WSEQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you authored the thread.

[DGspan]

Added the shortcake you sent me in an brizy shortcake element. Now the basic button appears. And then? There are no brizy styling options like adding an icon etc

Am 17.01.2022 um 10:48 schrieb Marc Lacroix @.***>:

[mkl_configurator_button product_id=1 classes="button"]Configure[/mkl_configurator_button]

[marcusig]

I visited https://rocketguard.at/konfigurator/ but it gives me a page not found error. Is it maybe not published?

[DGspan]

Sorry the page wasn’t public

Am 17.01.2022 um 11:00 schrieb Marc Lacroix @.***>:

https://rocketguard.at/konfigurator/ https://rocketguard.at/konfigurator/

[marcusig]

It looks like you've used the shortcode [mkl_configurator] and not [mkl_configurator_button]. Which of course is fine. There seems to be an issue with the https setup.

If you go to Settings > General make sure that both URLs use https:

[DGspan]

There is no field to enter the url. We host the site with Kinsta and use Cloudflare as well as the option force https

Am 17.01.2022 um 11:23 schrieb Marc Lacroix @.***>:

[mkl_configurator_button]

[DGspan]

Please have a look on https://rocketguard.at/test https://rocketguard.at/test

Configure button [mkl_configurator_button product_id=7097 classes="button"] and below the button how it should look like.

Sorry, I’m complete lost on this. It seems I don’t really get your point.

Is this https „problem“ an issue I should fix?

Am 17.01.2022 um 11:23 schrieb Marc Lacroix @.***>:

It looks like you've used the shortcode [mkl_configurator] and not [mkl_configurator_button]. Which of course is fine. There seems to be an issue with the https setup.

If you go to Settings > General make sure that both URLs use https:

https://user-images.githubusercontent.com/11990914/149752030-87402c3b-9198-470a-a8ee-7ec6e5991eac.png — Reply to this email directly, view it on GitHub https://github.com/marcusig/woocommerce-product-customizer/issues/45#issuecomment-1014362034, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXJFYH2CQ537YJM5LPNF2G3UWPU3BANCNFSM5L67WSEQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you authored the thread.

[marcusig]

You can try this:

[mkl_configurator_button product_id=7097 classes="brz-btn brz-css-epzpl brz-css-yqfxe"]<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve" class="brz-icon-svg brz-css-gsbbk brz-css-qzhea" data-type="outline" data-name="preferences-circle"><g transform="translate(0, 0)" class="nc-icon-wrapper" fill="none"><line fill="none" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="square" stroke-miterlimit="10" x1="14" y1="4" x2="23" y2="4" stroke-linejoin="miter"></line> <line fill="none" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="square" stroke-miterlimit="10" x1="1" y1="4" x2="4" y2="4" stroke-linejoin="miter"></line> <line data-color="color-2" fill="none" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="square" stroke-miterlimit="10" x1="22" y1="12" x2="23" y2="12" stroke-linejoin="miter"></line> <line data-color="color-2" fill="none" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="square" stroke-miterlimit="10" x1="1" y1="12" x2="12" y2="12" stroke-linejoin="miter"></line> <line fill="none" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="square" stroke-miterlimit="10" x1="14" y1="20" x2="23" y2="20" stroke-linejoin="miter"></line> <line fill="none" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="square" stroke-miterlimit="10" x1="1" y1="20" x2="4" y2="20" stroke-linejoin="miter"></line> <circle fill="none" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="square" stroke-miterlimit="10" cx="7" cy="4" r="3" stroke-linejoin="miter"></circle> <circle data-color="color-2" fill="none" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="square" stroke-miterlimit="10" cx="15" cy="12" r="3" stroke-linejoin="miter"></circle> <circle fill="none" stroke="currentColor" vector-effect="non-scaling-stroke" stroke-linecap="square" stroke-miterlimit="10" cx="7" cy="20" r="3" stroke-linejoin="miter"></circle></g></svg><span class="brz-span brz-text__editor">KONFIGURATOR</span>[/mkl_configurator_button]

This includes the icon from the other button, which is why it's quite long.

Is this https „problem“ an issue I should fix?

Yes, otherwise the configurator doesn't load properly when not logged in, and it could cause problems with other plugins.

[DGspan]

The button looks weird 🙂 So obviously it is not possible using the page builder button to open configurator in pop up.

Could this ssl thing could be issued because of our multisite installation? The guys from Kinsta say everything is fine on their end.

Thanks

Am 17.01.2022 um 12:01 schrieb Marc Lacroix @.***>:

You can try this:

[mkl_configurator_button product_id=7097 classes="brz-btn brz-css-epzpl brz-css-yqfxe]KONFIGURATOR[/mkl_configurator_button]

This includes the icon from the other button, which is why it's quite long.

Is this https „problem“ an issue I should fix?

Yes, otherwise the configurator doesn't load properly when not logged in, and it could cause problems with other plugins.

— Reply to this email directly, view it on GitHub https://github.com/marcusig/woocommerce-product-customizer/issues/45#issuecomment-1014393275, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXJFYH74QD33BZGFV4EMSU3UWPZIVANCNFSM5L67WSEQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you authored the thread.

[marcusig]

The button looks weird 🙂 So obviously it is not possible using the page builder button to open configurator in pop up.

What I sent you above had a " missing after the classes, which probably broke the button. Can you try to copy and paste it again?

Could this ssl thing could be issued because of our multisite installation?

Not sure. This usually happens when those 2 settings I sent in the screenshot are different. As you can see on this screenshot, several scripts fail to load on the page:

[DGspan]

Did a search and replace of http to https. Can you please check if everything is ok now.

And where to place the " exactly?

Am 17.01.2022 um 13:36 schrieb Marc Lacroix @.***>:

The button looks weird 🙂 So obviously it is not possible using the page builder button to open configurator in pop up.

What I sent you above had a " missing after the classes, which probably broke the button. Can you try to copy and paste it again?

Could this ssl thing could be issued because of our multisite installation?

Not sure. This usually happens when those 2 settings I sent in the screenshot are different. As you can see on this screenshot, several scripts fail to load on the page:

https://user-images.githubusercontent.com/11990914/149769975-fffadfd6-4ea5-41be-9759-cdabb77605fd.png — Reply to this email directly, view it on GitHub https://github.com/marcusig/woocommerce-product-customizer/issues/45#issuecomment-1014474632, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXJFYH6AUFNRV4JW4QGWY5DUWQELLANCNFSM5L67WSEQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you authored the thread.

[marcusig]

Did a search and replace of http to https. Can you please check if everything is ok now. Yes that worked.

And where to place the " exactly? This is where it's missing:

[DGspan]

This looks not right. And is not clickable 🙃 https://rocketguard.at/test

Am 17.01.2022 um 12:01 schrieb Marc Lacroix @.***>:

[mkl_configurator_button product_id=7097 classes="brz-btn brz-css-epzpl brz-css-yqfxe]KONFIGURATOR[/mkl_configurator_button]

[marcusig]

It looks like the classes have changed, so I suppose depending on brizy is changing them dynamically, which means you'll probably have to copy the CSS to make sure it stays.

And is not clickable

Only one configurator can be opened at the same time. So when you click the button, that same product is already opened below, so nothing happens. If you remove the other shortcode, it should open in a modal.

[DGspan]

Which CSS and where should I place it?

Am 17.01.2022 um 14:54 schrieb Marc Lacroix @.***>:

It looks like the classes have changed, so I suppose depending on brizy is changing them dynamically, which means you'll probably have to copy the CSS to make sure it stays.

And is not clickable

Only one configurator can be opened at the same time. So when you click the button, that same product is already opened below, so nothing happens. If you remove the other shortcode, it should open in a modal.

— Reply to this email directly, view it on GitHub https://github.com/marcusig/woocommerce-product-customizer/issues/45#issuecomment-1014571627, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXJFYHZVKVXQKVSNGLYJJBLUWQNRXANCNFSM5L67WSEQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you authored the thread.

[marcusig]

Try this.

You can paste it in Appearance > Customize > Additional CSS

button.configure-product.brz-btn svg {
    margin-right: 10px;
    margin-left: 0;
    stroke-width: 1;
}

button.configure-product.brz-btn svg {
    font-size: 16px;
}

button.configure-product.brz-btn {
    border: 3px solid rgba(0, 0, 0, 1);
    border-radius: 7px;
    background-color: rgba(0, 0, 0, 1);
    flex-flow: row nowrap;
    padding: 14px 42px 14px 42px;
}

button.configure-product.brz-btn:hover,
button.configure-product.brz-btn:focus {
    border-color: rgba(204, 153, 51, 1);
    background-color: rgba(204, 153, 51, 1);
}

Should give this:

[DGspan]

Finally that works 🙂 Appreciate your patience and help!

By the way. Your product is awesome! We hesitated a long time and preferred „MyCustomizer“ because it is presented much more professional.

You obviously know how to make professional looking websites. Why presenting the Customizer just on WordPress and a very strange looking product site. Please don’t get me wrong but we were really skeptical.

Cheers, Daniel

Am 17.01.2022 um 15:01 schrieb Marc Lacroix @.***>:

button.configure-product.brz-btn svg { margin-right: 10px; margin-left: 0; stroke-width: 1; }

button.configure-product.brz-btn svg { font-size: 16px; }

button.configure-product.brz-btn { border: 3px solid rgba(0, 0, 0, 1); border-radius: 7px; background-color: rgba(0, 0, 0, 1); flex-flow: row nowrap; padding: 14px 42px 14px 42px; }

button.configure-product.brz-btn:hover, button.configure-product.brz-btn:focus { border-color: rgba(204, 153, 51, 1); background-color: rgba(204, 153, 51, 1); }

[DGspan]

Sorry Marc but the button seems not to be responsive 🙈

Am 17.01.2022 um 15:01 schrieb Marc Lacroix @.***>:

button.configure-product.brz-btn svg { margin-right: 10px; margin-left: 0; stroke-width: 1; }

button.configure-product.brz-btn svg { font-size: 16px; }

button.configure-product.brz-btn { border: 3px solid rgba(0, 0, 0, 1); border-radius: 7px; background-color: rgba(0, 0, 0, 1); flex-flow: row nowrap; padding: 14px 42px 14px 42px; }

button.configure-product.brz-btn:hover, button.configure-product.brz-btn:focus { border-color: rgba(204, 153, 51, 1); background-color: rgba(204, 153, 51, 1); }

[marcusig]

Thanks for the feedback.

Sorry Marc but the button seems not to be responsive 🙈 Can you describe what's happening / what you need?

[DGspan]

https://vimeo.com/666815457/8433fdcae2 https://vimeo.com/666815457/8433fdcae2

Am 17.01.2022 um 15:42 schrieb Marc Lacroix @.***>:

Thanks for the feedback.

Sorry Marc but the button seems not to be responsive 🙈 Can you describe what's happening / what you need?

— Reply to this email directly, view it on GitHub https://github.com/marcusig/woocommerce-product-customizer/issues/45#issuecomment-1014616213, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXJFYH7BFXWXZ3NQNGLTMI3UWQTEVANCNFSM5L67WSEQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you authored the thread.

[marcusig]

Hi Daniel,

I see. The issue isn't with the button, it's that one of the container's it's in has a maximum width of 25%. You should put that width to 100% and align center.

[DGspan]

It’s not possible to align the „shortcode element“ content. Allignmentoption in the briny-element „shortcake“ has no effect on the position of the content.

Am 17.01.2022 um 12:01 schrieb Marc Lacroix @.***>:

[mkl_configurator_button product_id=7097 classes="brz-btn brz-css-epzpl brz-css-yqfxe]KONFIGURATOR[/mkl_configurator_button]

[marcusig]

Try adding the class aligncenter to the shortcode:

[DGspan]

Great. Worked. And please tell me finally, if I have the button on another position with black background. How to change the button bg color to white for this particular button.

Am 18.01.2022 um 14:36 schrieb Marc Lacroix @.***>:

Try adding the class aligncenter to the shortcode:

https://user-images.githubusercontent.com/11990914/149947486-302dd83e-ae39-4c7b-b642-66b7b836f853.png — Reply to this email directly, view it on GitHub https://github.com/marcusig/woocommerce-product-customizer/issues/45#issuecomment-1015419226, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXJFYH4TNWG6P6QSE5XU5V3UWVUGZANCNFSM5L67WSEQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you authored the thread.