-
Posts
-
THIS IS NOT A SUPPORT REQUEST
So I felt that there were a lot of essential elements missing from the WooCommerce builder elements. So I took some time to create some custom layout builder elements that cover the missing WooCommerce elements, and I included a few others that should be of use to anyone using Enfold to build custom product page layouts. I’ve attached the file and a detailed description of the elements included. Just follow the instructions and you should be good to go.
If you would like some custom ones made for the shortcodes and php snippets you use regularly with WordPress, WooCommerce, or any other plugin…I will entertain quote requests. Keyword there folks…entertain. But the ones I’ve built already should cover the needs of most people.
UPDATE
Price Heading – updated to optionally display the short description as a subheading.
NEW – Product Heading – Displays the product title with optional short description as a subheading.Hi!
Would you mind to push it to our library of elements also?
https://github.com/KriesiMedia/enfold-library/If you do not have the time, we can do it, but it would be amazing if you can create a pull request!
Regards,
BasilisYeah, I can do that. I have a new update to make on the price heading. If anyone has any requests for new ones while I have the files open, lemme know.
UPDATE
Price Header – Updated to give the option of having the numbers after a decimal point in a price be superscripted. Completely editable via CSS since the effect will differ depending on the font and size being used.
Hi,
Thanks a lot for doing this, it’s very appreciated indeed. Günter is having a closer look at this to see if we can integrate it into the theme in a future release.
Best regards,
RikardUPDATE
I’ve added a Gift Wrap element. This will be useful for those with simple WooCommerce setups not using a plugin like Product Add-ons to add a gift wrap option per product. I’ve set it up so that all you need to do is link it to the gift wrap product of your choice and it will grab the price and set the button automatically. This means that you can set up multiple gift wrap products and link this element to the one you want based on the product to account for varying costs of gift wrapping different products.Oh…and you can even change the present graphic on the left. I’ve included several options for various colors, but you can replace any of them with the one you want to match your site. Just try to make sure you keep it the same size as the one you’re replacing.
If anyone has any requests for WordPress, WooCommerce, or other plugin related shortcodes/snippets that you think would be useful to have as a layout element, just let me know.
Some notes…
First, I have updated the download page changing it from a direct download to a “Name Your Price” option. You can still get these layout elements for FREE if you want, but I gave the option to donate any amount in the event anyone felt the urge to say thanks by buying me a drink.
Next, as you may have noticed, not all of the elements have the preview option. That is because I haven’t quite figured out that section. Some of the new elements are easier to get to work in the preview area than others. If anyone who is familiar with the standard elements included in the theme wants to help, feel free to contact me directly.
Again…any ideas for new elements that work with WordPress, WooCommerce, or any other common plugins…just let me know. The next custom element I think I’ll work on will be a swatches preview element…for products of varying set color options. So stay tuned.
UPDATE
I’ve added a Product Category Promo. Simply set the category and the heading, category image, and category description will then automatically populate. All you have to do then is set the button link. The button link doesn’t automatically to the category page to account for the reality that everyone sets up their store differently. So you get to choose where it will link to. Note, for the elements to automatically populate, you will have had to fill them in. These elements are found in the Product section of your admin panel. As an added feature, we’ve accounted for the mobile layout. If the element is viewed on a cell phone, then the round image will be hidden and a wide version of the graphic will be displayed below the heading and the content element will lose the left padding to become full width.
Hi Kahil,
Thanks for your effort and sharing with Enfold community, we appreciate it :)
Regards,
YigitP.S.: Due to diagonal border on checkout page, it is not possible to choose PayPal or Credit Card. Please correct it so novice users could buy you drinks too :)
@Yigit – I see what you mean now. Must have been something that the WooCommerce update did. It used to just link to the Terms page. Now WooCommerce tries to load it. May want to send out a broadcast to all Enfold users letting them know that they need to make sure there is only text on that page, no other Enfold elements but text. Or just disable the Terms option in the WooCommerce settings.
I don’t know if it is an Enfold issue or WooCommerce. Might want to look at it. If the terms page has any enfold elements on it other than text, then it tries to load that page there in that section, which caused it to look like that. If there is just text on it, then it doesn’t display. I’m leaning towards an Enfold conflict on that one.
Any mods / enfold devs know how to filter down a product list to load only simple products? Right now I can load a list of all products to pick from, but for some of the needs I have to further refine some of these elements I’d like to limit what is listed to simple products only. For instance, the “add to cart” buttons and “gift wrap” elements are only going to work for a simple product. Right now the list shows all using the following code…
array( "name" => __("Which Product?", 'avia_framework' ), "desc" => __("Select which product should be added to the cart.", 'avia_framework' ), "id" => "link", "type" => "select", "taxonomy" => "single", "subtype" => "product", "multiple" => 6 ),UPDATE
Minor updates were made to a few elements to streamline the product or category selection process. Basically to make it so you don’t have to go in search of the product or category IDs. Lemme know if anyone notices any issues.Hi,
We have also provided a link of your elements to our Facebook Group and I have added a link to our Enfold Library
https://github.com/KriesiMedia/enfold-library/blob/master/README.md#online-resources-from-third-party-developersIf you want, you can always add your code inside our Library below
https://github.com/KriesiMedia/enfold-library/tree/master/actions%20and%20filters/ALB%20ElementsWe would love to see them there!
Let me know what you think
Best regards,
BasilisAny dev help with this question would be appreciated…
I know how to display an element box based on whether a specific plugin is installed, but simply displaying or hiding it based on whether the plugin is installed and active isn’t really ideal if you want to entice plugin developers to include compatibility with the theme. It’d be a real asset if someone is looking for a new theme based on compatibility with a specific plugin. So the ideal situation based on whether a specific plugin is active would be to simply disable the element box while still having it displayed…the way it is done for the WooCommerce elements if you’re editing a page or post. The following code line is what does that based on post type. Is there an easy way to do that based on other factors?
$this->config['posttype'] = array('product',__('This element can only be used on single product pages','avia_framework'));UPDATE
I have added two new element options for use with the Advanced Custom Fields plugin. If installed it will give you two new options where you can load the value of a single field or multiple values from a repeater.UPCOMING
I am working on a more complex element for a responsive timeline! So stay tuned for that one!Any requests for new elements?
Hi,
An option for Full WooCommerce fields ( build a full custom page ) Would be amazing ;-)
Best regards,
BasilisCan you be more specific on the sections? I think that between the built in elements and what is in my pack, all of the elements are there. I’m using them to build my shop pages right now. If there are smaller or more specific ones, just let me know.
Hi!
Actually – I can let you know what users do request a lot! :)
1. Option to build WooCommerce Pages with ALB with all elements ( from title, to image, description ,tabs everything )
2. Team Member Section ( With Custom Post Type to get the members ). People actually request that a LOT! If you manage to integrate the theme carousel also, you can easily make it premium :-)Your choise!
Cheers!
BasilisIs there a reason that the element preview pane doesn’t load the CSS you include with the element? I’ve only been able to get it to load if, and only if, I put the css in the quick css box in the theme settings. Calling a CSS file directly will load it on the site correctly, but not in the preview pane. Adding the CSS entries into the child theme style.css file loads it all on the site, but not in the preview pane. So how can I force the element preview pane to load the css?
In regards to my previous post…here’s a preview of the next element coming. I don’t feel comfortable releasing an update just yet…not until I figure out how I can force the CSS that goes with it to load in the Enfold Live Preview pane without having to copy it all into the custom CSS box in the theme settings. So any dev help on that would be appreciated. It’s pretty much done…just need to figure that out.
A more modern product element. Most aspects are completely editable. The colors aren’t because I didn’t really see a need given the style. For this, I added a new image dimension size because I felt the overall look lends itself to a thumbnail that was slightly taller than wide.
In this one it demonstrates a classy lil effect where when you mouse over the element, the image zooms and rotates just a little.
Here I demonstrate how the styling settings allow you to adjust the overlay gradient effect. You can edit where the gradient will begin relative to the bottom and where the gradient effect will stop. You can even make the values the same and just make it a solid block.
After some testing…I can’t see myself uploading these new updates until there’s a good way to get the CSS to load within the preview pane without having to have users copy/paste it into the quick CSS box. With the more complex elements that I’m trying to make, they almost need the preview for expediency.
If anyone is interested in seeing a live version of the upcoming addition… https://www.spiderflystudios.com/resources/spiderfly-enfold-elements/
As mentioned, I won’t make it live until I can figure out a better way to make the CSS load in the Enfold preview pane. Once I do, I can begin expanding the design to include posts, arrays, etc.
Hi,
Use the extra_assets method to load additional css or js files. Example:
function extra_assets() { if(is_admin()) { $ver = AviaBuilder::VERSION; wp_enqueue_style('avia_custom_element_css' , get_theme_file_uri( 'shortcodes/css/custom.css' ) , array('avia-modal-style'), $ver, all ); } }If you want to affect the preview pane, make sure that the custom css file is dependent on the “avia-modal-style” stylesheet.
Best regards,
IsmaelUnfortunately, that didn’t work. It failed to load the CSS completely. Is there a specific place where it needs to be placed in order to work?
Hi,
It’s working on my installation. Did you check the directory? It has to be included in the shortcodes > css folder inside the child theme.
Best regards,
IsmaelBut where does that snippet need to be placed? I tried placing it in the element file itself…that didn’t work. The CSS file is in there. using the same enqueue code independently it loads fine on the front end of the site.
wp_enqueue_style( 'spiderfly', get_stylesheet_directory_uri() . '/shortcodes/css/spiderfly.css',false,'1.1','all');
If I don’t also edit the core file to call the CSS, it won’t work in the preview pane.Now, if I mod your code to reflect where the CSS file is, it does not load on the front end nor the preview pane.
To be clear, I am placing this, and my, code in the custom element file itself, which should work as any other function I’ve used has worked fine. Seems like calling the array in there is what it doesn’t like.
- You must be logged in to reply to this topic.