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.

Can 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.

Any 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'));

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

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.

UPDATE
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.

Yeah, 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
I’ve taken this custom element and put it into an Advanced Layout Builder element to make it easier to create your custom pages. As a reminder, a color picker is a good addition to any product page where you’re selling something that has aspects where the customer can pick any color. All you have to do is follow the simple instructions on the page and you’re all set.

VIEW & DOWNLOAD HERE

UPDATE

I have taken the shortcode and turned it into a custom element for the Advanced Layout Builder to make it a little easier. Just follow the instructions and you should be good to go.

VIEW & DOWNLOAD HERE

Well…it’s more of a patch as the filter provided by your team shown above should do this. I would call this a bug as it changes the title everywhere but the <title> element in the header.

Ok….after hours of trial and error of different codes…I finally figured it out.

Let me preface this by explaining my reasons. I have some pre-designed business cards I sell. When using the product grid, if I have the title include the words “Business Cards” at the end, then it is really easy for the title to get long and then bleed over into a new line. Visually to my OCD it looked odd. Besides, they are listed on a page for Business Cards already…people know what they are. So I wanted to figure out a way to dynamically strip the words “Business Cards” from the titles in the product grid. Using something like a str_replace doesn’t work if you’re using a theme widget like that. So my only option was to remove the words from the product title itself. That meant that I had to come up with a way to dynamically add the words back into the product page’s <title> and SEO meta tags so it gets picked up for a more relevant search result.

So here’s how I did it so it ONLY applies to a product in a specific category. Can be easily modified for all kinds of uses… Logically you’d think the theme hook should do this automatically since it changes it everywhere else. Maybe it was overlooked or is a bug. I can’t see why anyone would want to only change the SEO meta tag entries and not the <title> tag along with it to match.

// change the <title> tag
add_filter('document_title_parts', 'dq_override_post_title', 10);
function dq_override_post_title($title){
   // change title for predesigned bcards only
    if(is_product() && has_term( 'Business Cards', 'product_cat' )){ 
        // change title parts here
        $title['title'] = get_the_title().' Business Cards'; 
        $title['site'] = 'Spiderfly Studios'; //optional
    }

    return $title; 
}

Here is a small update to the code which allows you to include an optional suffix to the pricing header.

Like before, this is for those who use the custom layout builder for their WooCommerce product listings and the plugin Advanced Custom Fields. The custom field would be added to the product edit screens.

// Custom Price Header
function getpriceheader( ){
global $product;
$price = $product->get_price();
$price_suffix = get_field('price_suffix');
if ($price_suffix){
	$suffix = '<small class="price_suffix">' . $price_suffix . '</small>';
}
return '<div style="padding-bottom:10px;color:#d54e21;" class="av-special-heading av-special-heading-h4 custom-color-heading avia-builder-el-9 avia-builder-el-no-sibling"><h2 class="av-special-heading-tag" itemprop="headline">Starting at only $'.$price . $suffix.'</h2><div class="special-heading-border"><div class="special-heading-inner-border" style="border-color:#d54e21;"></div></div></div>';
}
add_shortcode( 'priceheader', 'getpriceheader' );

Now…the next thing that comes up when using these is styling. I wanted the text to be a little smaller than the default setting for “small” elements in the stock CSS. I also didn’t like the look on mobile since the text would spill over to another line….just didn’t look right. So a few little CSS tricks cover this so that the text will be a little smaller and will automatically bump all of the suffixes to a new line on mobile screens only.

/* all screens */
small.price_suffix
	{padding-left:10px !important; font-size:60% !important;}

/* Mobile Only Mods */
@media only screen and (max-width: 767px){
small.price_suffix
	{display:block !important; padding-left:0px !important;}
}

/* Desktop Only Mods */
@media only screen and (min-width: 767px){
small.price_suffix
	{vertical-align:top !important;}
}