Support » Plugin: Product Configurator for WooCommerce » Mobile view – .form.form-cart always visible

  • Is it possible to position the following information: price, quantity and in cart button bellow the configurator in mobile view only?

    I don’t want it to pop-up when clicking on the cart icon as it is configured at the moment. Found some familiar topics, but the didn’t share the solution.

    Removed the cart icon with:

    @media (max-width: 660px){
    .mkl_pc .mkl_pc_container .mkl-pc-show-form {
    display: none;
    }
    }`

    Thanks for your help.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Contributor Marc Lacroix

    (@marcusig)

    Hi there,

    The CSS in this gist should do just that.
    https://gist.github.com/marcusig/0f4e9df7b4bd256bc0a053bbcf89daca

    You might need to do a few adjustments depending on your theme.

    Best,
    Marc

    • This reply was modified 3 months, 1 week ago by Marc Lacroix.
    Thread Starter Wohoo123

    (@wohoo123)

    Thanks Marc. Any chance you’ve copied the wrong url? 404

    • This reply was modified 3 months, 1 week ago by Wohoo123.
    Plugin Contributor Marc Lacroix

    (@marcusig)

    Yes sorry, I obviously added a “v” at the end when pasting: https://gist.github.com/marcusig/0f4e9df7b4bd256bc0a053bbcf89daca

    Thread Starter Wohoo123

    (@wohoo123)

    Thanks.

    I want .mkl_pc_toolbar to auto adjust its size based on the content in it. Is this possible? Right now if there are a lot of options to choose from, the user needs to scroll in .mkl_pc_toolbar.

    Does it makes sense what I’m saying?

    This was my code:

    @media (max-width: 660px){
    .mkl_pc .mkl_pc_container footer .form.form-cart {
    position: absolute;
    bottom: -165%;
    }
    .mkl_pc .mkl_pc_container footer {
    border-top: none;
    }
    .mkl_pc .mkl_pc_container .mkl-pc-show-form {
    display: none;
    }
    body.configurator_is_inline .mkl_pc {
    min-height: 900px;
    }
    .mkl_pc .mkl_pc_container .mkl_pc_toolbar {
    bottom: 210px;
    }
    .mkl_pc .mkl_pc_container footer {
    text-align: center;
    height: 207px;
    }
    .mkl_pc .mkl_pc_container footer .form.form-cart {
    position: absolute;
    bottom: 0px;
    }
    }`

    Plugin Contributor Marc Lacroix

    (@marcusig)

    It’s hard to say without the context. Can you share a link to your product?

    Thread Starter Wohoo123

    (@wohoo123)

    It runs on a local environment so unfortunately not.

    https://postimg.cc/4npbh6BN

    This section should increase and decrease automatically based on the different options. Right now I should scroll in this section to see the 4th layer.

    Plugin Contributor Marc Lacroix

    (@marcusig)

    Okay.
    So it’s possible, but you’ll have to change quite a bit of CSS. At the moment, most parts use position: absolute;. So in order for the toolbar to adapt to its content, you’ll have to change everything (almost) to use relative positioning instead.

    Thread Starter Wohoo123

    (@wohoo123)

    Thanks for your help Marc. I’ll do my best. But doesn’t look like a quick fix.

    Thread Starter Wohoo123

    (@wohoo123)

    @marcusig found the solution:
    This code did the trick.

    @media (max-width: 660px) {
    .mkl_pc .mkl_pc_container .mkl_pc_toolbar {
        position: relative;
      	}
    .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices {
        position: relative;
    }
    .mkl_pc .mkl_pc_container footer {
        display: none;
      }
      .mkl_pc .mkl_pc_container .mkl_pc_toolbar .form.form-cart {
        display:block;
      }
    }
Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.