Product category page, Add to Cart and Variants

Hi,

You can edit your menu item via the Joomla menu manager and under the "Products options" tab, you can set the "Popup mode" setting to "popup only" and then activate the "Add to cart" setting. This way, you'll get a "choose options" button on the listing. When the customer clicks on it, he will get a popup where he can select the variant before clicking on the add to cart button, all the while remaining on the listing page.

Regarding the quantity selection field, I checked your website and apparently the issue is with your Joomla template.
Your template's file are located in the folder templates/yootheme/
In a Joomla template, the main file is the index.php file in that folder which generates the layout for the pages.
Also, there is a component.php file next to it which is used to display the pages inside popups.
If I look at the CSS code applied on the quantity selection field on the normal product page, the CSS comes from the file templates/yootheme/css/theme.9.css of your template. But if I look at the CSS code applied on the quantity selection field in the popup, the CSS comes from the file /media/templates/site/cassiopeia/css/template.min.css
What this probably means is that your Joomla template is missing the component.php file in its folder. In that case, Joomla will default back to Cassiopeia's (Joomla's default template on the frontend) component.php file and that explains why the CSS code from the template is missing.
The solution is to add the missing component.php (or if it is present to fix its code) based on Cassiopeia's component.php file but add the template's CSS file to its header so that the CSS of the template can properly apply to popups.