-
AuthorPosts
-
November 5, 2020 at 8:49 pm #1258726
Hello! I am having trouble with the Date Selector not showing on the Woocommerce Rental Products extension. By default, this extension is supposed to allow front-end users to select a date range for renting a product. We are currently using the Enfold theme. However, it is only rendering a quantity section and add to cart button (no date picker). We tested this temporarily on the default WordPress Theme and the date picker displayed successfully. We really love the Enfold theme and would like to stick with it if possible. Can you please help us get this extension and its date picker working successfully for rental products?
Thanks in advance!
November 6, 2020 at 5:27 pm #1258921Hey,
Thanks for contacting us!
Honestly, I do not have any experience with the plugin but it seems like form is hidden in Rental Products CSS file. Please see the screenshot I attached in private content field.
Can we make some tests on this installation, such as editing theme files and switching to default theme? If so, could you please post FTP logins here privately as well? :)
Best regards,
YigitNovember 6, 2020 at 7:23 pm #1258950That sounds great Yigit! I’ve provided FTP login in private content field. We look forward to hearing your findings.
Thanks in advance!
November 12, 2020 at 8:19 pm #1260209Hi Yigit! Just following up on this ticket. Let me know if there’s anything else you need to help us resolve this issue. Looking forward to your response!
November 17, 2020 at 5:36 am #1260891Hi,
Thank you for the inquiry.
The theme removes or disables hooks in the default product template, and the plugin might be using one of those hooks to display the date picker. Could you ask the plugin developers which hook/s the date picker function is attached to?
The disabled hooks can be found in the avia_woocommerce_remove_hooks function inside the enfold\config-woocommerce\config.php file.
Best regards,
IsmaelNovember 18, 2020 at 5:12 pm #1261325Hi Ismael! Support for the Rental Products plugin by WooCommerce stated that the rental datepicker on the product page is hooked into the following:
woocommerce_before_add_to_cart_button
Hope this is helpful! Please let us know if there’s anything else you need to help us get this issue resolved.
November 20, 2020 at 4:05 pm #1261811Hi,
Thank you for the info.
The date picker was not displaying because of a script error, which was caused by an option in the theme that loads jQuery in the footer. We disabled that option temporarily and this allows the date picker to show in the product page but it is not yet working correctly — the date items or buttons are not visible. You might have to ask the plugin authors to inspect the element so that they could see what is going on with the date picker element.
Best regards,
IsmaelNovember 20, 2020 at 9:46 pm #1261867Hi Ismael! Below is the response from WooCommerce support regarding your request:
—–
So it looks like the theme has added an overflow hidden rule which is restricting the calendar displaying which is why it is cut off. To get around this you could ask your theme developer to remove that or override it yourself using this CSS code added to the theme stylesheet or via the Additional CSS section of the Customizer (I did try to access that myself but there is an error when you try to access the page):.single-product form.cart {
overflow: visible !important;
}The above alone won’t be quite enough however as when you apply this it looks like they have a high z-index on the product tabs for some reason so they will overlap the calendar too, again get them to fix that or use this code to override it:
#top div.product .woocommerce-tabs ul.tabs {
z-index: 0 !important;
}
—–
Hope this is helpful! Please let us know if you have any more questions or if there’s anything else you need to help us get this issue resolved.November 23, 2020 at 7:42 am #1262270Hi,
Thank you for the info.
Did you follow their suggestions, or add the css code that they recommended? These changes should allow the date picker to display correctly. Just add it in the Quick CSS field or in the child theme’s style.css file. And do not forget to toggle the Performance > File Compressions settings after adding the modification.
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.