oltdev

<p>A series of shortcodes for using custom field values in pages or posts (or in sidebar widgets – via <a href="https://wordpress.org/extend/plugins/widget-logic/" rel="ugc">Section Widget</a>!), which would then allows you to take store the actual data in custom fields while storing the presentation in the page/post body. This transforms WordPress into an awesome CMS. Keep reading for more inspirations.</p>
<h4>Basic Usage</h4>
<pre><code>[cf "custom field name"]
</code></pre>
<p>Example:</p>
<pre><code>Picture of the day:
<img src='[cf "picture-link"]' />
</code></pre>
<p>This would output something like <code><img src='http://thesite.com/something.jpg' /></code>, assume the post/page has the custom field “picture-link” and its value is “http://thesite.com/something.jpg”. That way, you (or your clients!) would never accidentally take out a div when updating your page because you won’t have to touch the page/post body anymore!</p>
<h4>Default Values</h4>
<pre><code>[cf "custom field name" default="display this if the CF is undefined"]
</code></pre>
<p>Example:</p>
<pre><code>Contact [cf "support-email" default="support@mycompany.com"] if you have questions.
</code></pre>
<p>support@mycompany.com will be displayed there if the custom field “support-email” is not present in that post/page.</p>
<h4>Simple Template</h4>
<pre><code>[cf "custom field name" default="default value"]...template...[/cf]
</code></pre>
<p>Example:</p>
<pre><code>Price: [cf "price" default="Pricing information not available yet."] USD$%value% [/cf]
</code></pre>
<p>If you cannot use <code>%value%</code> as your placeholder text for some reason, you can change it by specifying the placeholder attribute.</p>
<p>Example:</p>
<pre><code>Price: [cf "price" default="Pricing information not available yet." placeholder="__value__"] USD$__value__ [/cf]
</code></pre>
<h4>Multiple Values</h4>
<p>It’s smart enough to do the right thing. If your post has the following custom fields:</p>
<ul>
<li>concert-date: Jan 14th</li>
<li>concert-date: Jan 28th</li>
<li>concert-date: Feb 2nd</li>
</ul>
<p>Then <code>[cf "concert-date"]</code> will output <code>Jan 14th,Jan 28th,Feb2nd</code>, exactly what you would expect. You can also optionally provide a separator to replace the default (,).</p>
<p>Example:</p>
<pre><code>Come to one of our concerts on the following dates: [cf "concert-date" separator=" / "]
</code></pre>
<p>(=> Jan 14th / Jan 28th / Feb 2nd)</p>
<h4>Sorting</h4>
<pre><code>[cf "custom field name" sort="nosort|asc|dsc|random" type="string|int|integer|float|bool|boolean|date|auto"]
</code></pre>
<p>You can control how it sort the items (when there’s more than one) using the sort attribute (default is <code>nosort</code>). By default, it would compare them using PHP’s comparison operator (i.e. try to cast them into numeric values, or compare them as strings if that failed). However, you can force a type cast by specifying the type attribute (default is <code>auto</code>).</p>
<h4>Display Single Value</h4>
<p>If display multiple values is not what you want it to do, you can use <code>[cf single="true"]</code> to force it to display only the first value. Combining what we have learned so far, you can display a single random value by <code>[cf single="true" sort="random"]</code>.</p>
<h4>Summary</h4>
<p>Syntax for <code>[cf]</code> shortcode: (default values in parenthesis)</p>
<pre><code>[cf "field-name" default="" placeholder="%value%" single="(false)|true" separator="," sort="(nosort)|asc|dsc|random" type="string|int|integer|float|bool|boolean|date|(auto)"](OPTIONAL) template[/cf]
</code></pre>
<h4>Conditionals</h4>
<p>Conditionals tags is what makes this plugin unique. Here is a list of them:</p>
<pre><code>[if-cf-def "custom field name"]
  Do this when "custom field name" is defined for this page/post
[/if-cf-def]

[if-cf-ndef "custom field name"]
  Do this when "custom field name" is NOT defined for this page/post
[/if-cf-ndef]

[if-cf-eq "custom field name" "value"]
  Do this when "custom field name" == "value"
[/if-cf-eq]

[if-cf-neq "custom field name" "value"]
  Do this when "custom field name" != "value"
[/if-cf-neq]

[if-cf-lt "custom field name" "value"]
  Do this when "custom field name" < "value"
[/if-cf-lt]

[if-cf-gt "custom field name" "value"]
  Do this when "custom field name" > "value"
[/if-cf-gt]

[if-cf-let "custom field name" "value"]
  Do this when "custom field name" <= "value"
[/if-cf-let]

[if-cf-get "custom field name" "value"]
  Do this when "custom field name" >= "value"
[/if-cf-get]
</code></pre>
<p>More detailed documentations will be published soon. In the mean time, check out the following examples and the comments in the PHP code to get a rough idea.</p>
<h4>Examples</h4>
<pre><code>[if-cf-get "deadline" "today" type="date"]
    Submit your application <a href='[cf "submit-link"]'>here</a>.
[/if-cf-get]

[if-cf-lt "deadline" "today" type="date"]
    Sorry we regret that we cannot take anymore applications.
[/if-cf-lt]

[if-cf-def "discounted-price" "discount-expires" logic="and"]
    This product is on discount, get it now for [cf "discounted-price" /] [cf "discount-expires" default="for a limited time"]before %value%[/cf]!
[/if-cf-def]
</code></pre>
<p><strong>Please note: It seems that there is a serious bug in WordPress’ shortcode parser that prevents shortcodes from functioning correctly in certain occasions.</strong> The developers are hard at work to get this fixed before the 2.8.3 release. (See <a href="https://core.trac.wordpress.org/ticket/10082" rel="nofollow ugc">#10082</a>) Therefore, please do not report any parser related bugs for the moment. (e.g. the shortcode is displayed on the actual page)</p>


Conditional Custom Fields Shortcode

Use custom field values in you pages or posts. With conditional supports which enables basic templating with custom fields.

Automattic

WooCommerce

SomewhereWarm

Manos (a11n)

<p>Free mini-extension for <a href="https://woocommerce.com/products/composite-products/" rel="nofollow ugc">WooCommerce Composite Products</a> that allows you to create dynamic, multi-layer Composite Product images that respond to option changes. The mini-extension leverages <a href="https://docs.woocommerce.com/document/composite-products/composite-products-advanced-configuration/" rel="nofollow ugc">Scenarios</a> to conditionally layer additional images over the main Composite Product image.</p>
<h3>Documentation</h3>
<p>The plugin introduces a new “Overlay Image” Scenario Action that lets you:</p>
<ul>
<li>Choose an image from your Media library.</li>
<li>Define <strong>conditions</strong> for layering this image over the main Composite Product image.</li>
</ul>
<p>This approach makes it possible to utilize either <strong>swapping</strong> or <strong>compositing</strong> techniques to conditionally modify the main product image.</p>
<p>For more information and examples, check out the plugin’s repository on <a href="https://github.com/woocommerce/woocommerce-composite-products-conditional-images" rel="nofollow ugc">GitHub</a>.</p>
<p><strong>Important</strong>: The code in this plugin is provided “as is”. Support via the WordPress.org forum is provided on a <strong>voluntary</strong> basis only. If you have an active subscription for WooCommerce Composite Products, please be aware that WooCommerce Support may not be able to assist you with this experimental plugin.</p>
<h4>Image Swapping</h4>
<p>If you have previously worked with Variable Products and Variation Images, chances are you are already familiar with this technique. Here’s the idea behind image swapping:</p>
<p>The main product image is <strong>swapped</strong> with an image that depicts the chosen options as soon as the configuration of the Composite Product is complete.</p>
<p>Instead of replacing the product images, the same effect can be achieved by covering the main product image with a fully opaque (non-transparent) image.</p>
<h4>Image Compositing</h4>
<p><strong>Compositing</strong> is the combination of multiple layers of images into a single image. The final composition creates the illusion that all stacked images are parts of the same scene. For this technique to work, each layered image must include:</p>
<ul>
<li>some <strong>transparent</strong> areas that allow lower layers of the stack to be seen;</li>
<li>some <strong>opaque</strong> areas that introduce new elements in the scene by covering the layers below; and</li>
<li>possibly, some <strong>semi-trasparent</strong> areas that introduce new elements while partially allowing the layers below to be seen.</li>
</ul>
<p><strong>Note</strong>: When multiple <strong>Overlay Image</strong> Scenarios exist, each adds its own image to the main product image stack. The layering order of these conditional images depends on the relative position of their Scenarios: If Scenario A is positioned higher than Scenario B under <strong>Product Data > Scenarios</strong>, then the image added by Scenario A will appear higher in the stack than the image added by Scenario B.</p>
<h4>Swapping vs Compositing</h4>
<p>The <strong>Swapping</strong> technique is a viable choice if the number of Component Options is relatively low, as it requires you to <strong>capture one picture</strong> and <strong>create one Scenario</strong> for every possible configuration. Its main advantage over the <strong>Compositing</strong> technique is that it allows you to obtain a natural-looking result, even if you don’t have advanced image processing skills.</p>
<p>The <strong>Compositing</strong> technique is often a better choice if the number of possible configurations is high, as it requires you to create one “compositable” image for each Component Option. However, specialized knowledge and tools are required to produce a natural-looking result. For this reason, the Compositing technique is often preferred when 3D product models are available, as 3D modelling software can speed up the production of “compositable” images.</p>
<h4>Limitations</h4>
<ol>
<li>The product image cannot be opened in a lightbox once the mini-extension has stacked additional images over it.</li>
<li>The image zooming feature included with WooCommerce is not compatible with the swapping/compositing techniques introduced by the mini-extension. When a Composite Product includes Scenarios with the <strong>Overlay Image</strong> Scenario Action, the image zooming feature of the Composite Product is disabled.</li>
<li>The plugin works with themes that declare support for the <code>wc-product-gallery-slider</code> feature.</li>
</ol>


Composite Products – Conditional Images

Free mini-extension for WooCommerce Composite Products that allows you to create dynamic, multi-layer Composite Product images that respond to option  …

Conditional Custom Fields Shortcode vs Composite Products – Conditional Images