Quick View Extension Customization

Answered

Follow

Greg Bopp

• August 05, 2017 17:50

I have two questions of varying importance about the 'MAGENTO 2 ADVANCE PRODUCT QUICK VIEW AND AJAX CART'.

Question 1 - Important: 

How can I manipulate WHERE on the page / in the HTML that the Quickview Button will be placed? By default it is placing the button in the following path:

.page-products > .products-grid > .product-item > .product-item-info > .product-item-details

Ideally, I would like to have the button implemented at the following:

.page-products > .products-grid > .product-item > .product-item-info > .product-item-actions > .actions-secondary

This would allow me to treat the quickview button exactly like the add-to-compare or add-to-wishlist buttons.

Assistance would be greatly appreciated!!

Question 2 - Not as Important

I see an option to add custom css in the QuickView backend. How would this be acheived. Are there examples of what can be accomplished by using this method?

Thanks!!

0

• Official comment

  

  Support

  • February 12, 2018 20:06
  • Edited

   

  Question 1:

  In order to modify the module structure and functionality you need to create another module 'Quickview_Custom', where you can make the necessary XML changes. You should keep the current quick view module un-customised in order to be able to upgrade to future versions without loosing your changes. 

  In the new custom module you can change the quick view XML templates in order to match your requirements, remove the button from one block and add it to the new location. Similar method can be applied to other modules. 

   

  Question 2:

  Any custom CSS that you add in the quick view custom css area will be applied in storefront for the quick view lightbox/popup. You can customise appearance of the elements included in quick view. You can change colors, add paddings, borders.. you name it. Basically quickview follows the design you have on product page, but sometimes small adjustments are necessary. 

  By adding the CSS changes in the custom filed of quickview you can achieve quick design adjustments without creating a subtheme or a custom module.

  For example to change the price color to red when displayed in quick view lightbox, add the code below to the Custom CSS area of quick view:

  .price {

  color: red;

  }

   

  See also:

  https://support.weltpixel.com/hc/en-us/articles/115000705293-How-to-customize-css-xml-phtml-js-files-in-a-Magento-2-child-theme-examples-Tutorial-

  Comment actions Permalink
• 

  Greg Bopp

  • August 16, 2017 20:36

  I appreciate the response... Unfortunately I am not understanding the answer to the first question. I do not know how to "create another module 'Quickview_Custom', where you can make the necessary XML changes.". Which xml file or files need to be changed? Do .phtml files also need to be changed?

  It have a very specific question and I would greatly appreciate a very specific answer. What exact steps do I need to take to make the weltpixel quickview button show up in my HTML in the following path:

  .page-products > .products-grid > .product-item > .product-item-info > .product-item-actions > .actions-secondary

  Which file establishes where the quickview button is going to be placed?

  I do not understand how to create a new module. Additional information would be needed to do as you have instructed. My apologies for not understanding... My appreciation for clarification.

  Thanks!

  0

  Comment actions Permalink
• 

  Support

  • February 12, 2018 20:07

  See also this related article:

  https://support.weltpixel.com/hc/en-us/articles/115000705293-How-to-customize-css-xml-phtml-js-files-in-a-Magento-2-child-theme-examples-Tutorial- 

   

  1

  Comment actions Permalink

Please sign in to leave a comment.