[MarketPress] Help adding quantity field in the product list

I've got a product list page. For products that don't have variations, I need a quantity box to display not just the add to cart button. I found a previous forum article in support that added code to the theme functions.php, but it did not work for me, most likely because the code is outdated.

Here's the older article - https://premium.wpmudev.org/forums/topic/marketpress-show-quantity-in-product-list

Could you please help me refactor this code so that I can achieve this functionality now? Please advice.

  • Konstantinos Xenos
    • Rubber Duck Debugger

    Hi Holly !

    Sorry for the delayed reply but we've been really busy.

    I've created a custom plugin for you to help with your request. You can easily install it following these instructions. You can also preview the code here if you like before installing: https://gist.github.com/wpmudev-sls/e9ea55053d3a807b91a6b6cbadb7fbe7

    How to install:
    Always make sure to keep a backup of your site before changing/adding custom code.

    1] Navigate to your /wp-content/ directory and create a new one named mu-plugins if it doesn't exist.
    2] Download the attached .zip and extract it. You will find a file named mp-add-quantity-in-product-list.php
    3] Upload the file from the .zip into the mu-plugins directory.
    4] The final path should look like /wp-content/mu-plugins/mp-add-quantity-in-product-list.php
    5] Everything should work after that automatically. Refresh your store / front-end page and you should be seeing the quantity fields.

    Tell me if this worked for you!

    Regards,
    Konstantinos

  • Holly
    • Design Lord, Child of Thor

    Hello Konstantinos,
    Thank you for getting back to me. While it does produce a quantity box, it introduces a BUG and breaks the Options Button. There are several issues.

    1] The location that I needed a quantity box is for products with no variations. I need the quantity box to be placed next to the Add to Cart button - not stacked on top of it. How can I do that?
    2] BUG: For products with variations, normally, an options button instead of an add to cart button is shown. With the mp-add-quantity-in-product-list.php installed - the Options button is broken and when clicked now just spins forever.
    3] Also, for products with variations, there should be NO quantity box, just the Options button, since when you click on the options button there is already a quantity box inside the Options box popup that opens up.
    4] I need to know how to change the size of the Options popup box that opens up when that Options button is clicked. Right now, it's very narrow and looks bad. I want to change the size and shape of this popup.

  • Konstantinos Xenos
    • Rubber Duck Debugger

    Hey Holly ,

    Sorry to hear that it didn't work as expected from the get-go. I didn't know if you had variables as well so my code was aiming simple products. Let me get back to it and I'll send you an update as soon as possible!

    Inform me as well please if you want the Quantity on the left or right of the Add to Cart button.

    Regards,
    Konstantinos

  • Holly
    • Design Lord, Child of Thor

    I would like the Quantity on the left side of the Add to Cart. Also, do you have answers for the other questions?

    I need to know how to change the size of the Options popup box that opens up when that Options button is clicked. Right now, it's very narrow and looks bad. I want to change styling for this popup, e.g. the size and shape of this popup.

    • Konstantinos Xenos
      • Rubber Duck Debugger

      Hi again Holly , I'm back with an update.

      I have updated the code at https://gist.github.com/wpmudev-sls/e9ea55053d3a807b91a6b6cbadb7fbe7 , if you want a quick preview for some coding explanations that follow to help you out. You can download it as well from the attached .zip and upload it on your installation following the steps mentioned on the previous comment.

      I have altered the code so the quantity field show on the left side of Add to Cart as you wanted but that might require some extra CSS adjustments and that could be done on line 59 ( .customqty ) or accordingly to any other element. It should not be affecting the Variable products now at all, but please do a thorough test as our set up is not the same and I might be missing something yet again ( sorry but it's hard to go 100% straight away as I'm not coding this on your setup so I can test freely ). Please do a thorough test as well and inform me if anything is off so I can help further.

      As for the width of the popup you'll find width: 500px !important; on line 50, you can change that ( 500 ) to a width in pixels that you like and everything should be set.

      I hope this helps and that we've managed it this time!

      Regards,
      Konstantinos

  • Holly
    • Design Lord, Child of Thor

    Hi, I guess I'm not explaining the Quantity box properly. I'd like the Quantity label that goes with the quantity input box to be next to each other and inline with the Add to Cart button - as shown below.

    Quantity [ input box ] Add to Cart button

    Right now, the label is set to display: none and when I turn that off and get the label back, it is on top of the input box. I can't seem to get it to be as shown above.

  • Konstantinos Xenos
    • Rubber Duck Debugger

    I'll need access to help you with the CSS there if you like, unfortunately I don't know how your theme is set up so I'll have to see the current styles & files to test this.

    You can send me the information needed to make the changes for you privately through our contact form: https://premium.wpmudev.org/contact/#i-have-a-different-question by following this example:

    Subject: "Attn: Konstantinos Xenos"
    
    - Admin login ( if Multisite please provide Super Admin details ):
    Admin Username:
    Admin Password:
    Login URL: 
    
    - FTP credentials
    Hostname:
    Username:
    Password:
    Port:
    Key-File ( and password ) if needed
    
    - Link back to this thread for reference
    - Any other relevant URLs -or- information regarding the issue that was not included in this thread

    Regards,
    Konstantinos

  • Konstantinos Xenos
    • Rubber Duck Debugger

    No problem at all Holly , I'm glad I can help!

    I think everything should be to your liking now. I just did a 'minor' adjustment compared to the outcome you wanted so you can avoid mobile-friendly conflicts easier but fixed all styles as well for you for all breakpoints since I was doing the changes to save some time. The difference is that the 'Quantity' label isn't "dragged back" underneath the image area as that could easily break the UI on different screens. ( If you still want to do it you can add a margin-left: -95px; to the .customqty class in the css, but you will have to manipulate the responsive classes as well after to make it work properly everywhere ).

    As you'll see my screenshots are in widths of 360 pixels+ ( so basically a samsung S5 / iphone6,7,8 about ), 768 pixels+ (tablets etc) and 990 pixels+ ( pc screens ). I went with what Divi gives pretty much to play it as safe as possible.

    Regards,
    Konstantinos

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.