How to override WooCommerce shortcode's output? - php

I'm working on a Wordpress theme, where I want to change the generated markup of the [product_category] WooCommerce shortcode. I browsed through the templates directory in the plugin, but can't find the file related to this particular shortcode.
So my question is, which files I have to copy to my template and modify to change the HTML outcome of [product_category]? (CSS modifications are already done, but I need to display a very different HTML markup, and I don't want to hack around with JS).
Also it would be better not to rewrite the whole function with a hook, but change the original HTML a bit (for example, set the background color based on a custom meta field).

Esiest way :)
add_shortcode('test','test_show_shortcode');
function test_show_shortcode( $atts ) {
echo do_shortcode('[products limit="100" columns="..." category="..."]');
}
[test]

Related

Post name and custom fields in Wordpress Shortcode

I'm using shortcodes in my Wordpress page to display a responsive Google Map centered at specific location. To do it I'm using shortcode supported by external Wordpress plugin. Such shortcode is let's say [map address="New York"].
As all my Wordpress posts titles are names of the cities, I would like to automatize the process and be able to display the titles of the post in place of the address parameter in [map] shortcode.
Is it possible? Is there any way to do it? As far as I know nesting code or variables in shortcode isn't supported by Wordpress but maybe there is some kind of a workaround.
The same behavior I'd like to accomplish for 'custom field' - really similar situation.
I'd appreciate any help and any advice
Try to put this code to functions.php file in your theme:
function mymap_shortcode() {
echo do_shortcode('[map address="'.esc_html( get_the_title() ).'"]');
}
function mymap_shortcodes_init() {
add_shortcode('mymap', 'mymap_shortcode');
}
add_action('init', 'mymap_shortcodes_init');
And then in posts/pages (or even put it directly to template, or create another filter to add that) use shortcode [mymap] that will run [map] shortcode with current page title as parameter.

How to add inline css in WordPress plugin/theme generated by shortcode in page content?

I have a plugin and I need to correctly include inline css in WordPress using wp_add_inline_style() function. There is not problem to include CSS using this function in plugin, it works fine. But I have shortcodes that generates Custom CSS (different for different shortcode). For example I have shortcode that add text title with custom color to page (I generated unique CSS class name for this title DIV and add corresponding styles).
For example:
[mytitle text="Title example" color="#666666"]
And I have css that I need to inline:
.mytitle-id-4324324 h1 { color:#666666; }
As you see I can have multiple shortcodes on the same page, with different colors inside. The problem that if I use wp_add_inline_style function in shortcode it never not work. It should be inlined in "wp_enqueue_scripts" action, that does not triggered in right time from shortcode as I understand (because shortcodes loaded by WordPress AFTER wp_enqueue_scripts, when WordPress generate content). How to resolve this?
Note: I know that I can add inline CSS in HTML code or echo and it works, but I does not need this. My question how to get this work with wp_enqueue_scripts()?
As I understand I need to get one big global custom CSS from entire page shortcodes somehow, and then send it to some function that will include this big custom css for this page. But how to do this because shortcodes defenitions executed after including CSS by WordPress?
Example code for my shortcode:
function mgt_shortcode_header_block_wp($atts, $sc_content = null) {
.. some code here where shortcode show HTML output and generate custom css
}
add_shortcode("mgt_header_block_wp", "mgt_shortcode_header_block_wp");
How I can add inline custom css from shortcode? I can't do this inside shortcode (because its will not be called in wp_enqueue_scripts action) and I can't add some function after this function, because - custom css variable available only inside shortcode (I can't make it global var, because this is not good to use global vars here), I understand that I may need to pass it to some function from shortcode, something like:
function mgt_shortcode_header_block_wp($atts, $sc_content = null) {
.. some code here where shortcode show HTML output and generate custom css
mgt_add_to_inline_styles($custom_css); // how should work this function to correctly add inline styles passed to it?
}
add_shortcode("mgt_header_block_wp", "mgt_shortcode_header_block_wp");
But this will not work, because mgt_add_to_inline_styles() function will be executed only when this shortcode will be used on page in content, and this will be AFTER wp_enqueue_scripts action in any case, even if I will try to add mgt_add_to_inline_styles() to wp_enqueue_scripts action somewhere somehow.
So from my example I does not understand what code should be inside mgt_add_to_inline_styles() function to make it work correctly?

How to display result of PHP render in HTML ID

After digging internet for an answer I cannot find any idea about how to deal with my issue. I think the problem is common for someone who knows PHP a little bit.
To describe the situation. For some custom WordPress plugin I've got two PHP files: ff_config.php and loantest_form.php. First file contains some configurations of plugin plus following lines:
/**--------------------------TABLE SHORTCODES-----------------------*/
function render_loantest_form() {
include(plugin_dir_path(__FILE__) . 'front/loantest_form.php');
}
add_shortcode( 'render_loantest_form' , render_loantest_form );
/**--------------------------DISPLAY PLUGIN IN FOOTER-----------------------*/
add_action('wp_footer', 'display_loantest');
function display_loantest() {
echo render_loantest_form();
}
Which I suppose rendering second file containing enqueue scripts (js/css) and whole HTML output and placing in wp_footer where it exactly is on my page.
The question is: how to change mentioned lines to allow me to place render result (loantest_form.php) in specific div / id on page (for example #sidebar-slider)?
If you want to display your shortcode in a template file,
echo do_shortcode('[render_loantest_form]');
Enable the use of shortcodes in text widgets.
add_filter( 'widget_text', 'do_shortcode' );
And inside the text editor
[render_loantest_form]
You can read more about do_shortcode()
Note that you need to be sure that the file load in the render function is good and that it returns the expect content.

Wordpress shortcode with separate template/file?

I'm at an early stage of learning Wordpress (and shortcode), so bear with me:
To me, shortcodes seem like a swiss army knife of not having to use page-specific templates for everything. I like to build as many pages in the wysiwyg as possible, but often I would need some (reusable) php stuff for displaying stuff in a certain way.
Having googled a lot, it seems to me the way to do shortcodes is like:
function caption_shortcode( $atts, $content = null ) {
return '<span class="caption">' . $content . '</span>';
}
My question is, is it possible to put the html in a separate template-ish file? It seems wrong and verbose to put all this markup here, escape quotes, et.c. Like a template-file for a shortcode, to which the shortcode can pass some Data Transfer Object (or simply just some scoped variables). So: display in template-file, logic for finding data (to pass to said template-file) in shortcode-function (wherever it may be defined, functions.php, separate plugin, or something).
You can set-up views(php files) and then include partial views into those ones. Wordpress allows templates to be includes within other templates to ensure code reuse and its easily modifiable by child themes. You can use this function to include those
get_template_part( $slug );
However, in your case, the short code function needs to return the value to the caller function. So, this setup will not work.
For code that effects FUNCTIONALITY, put your code in a plugin.
For APPEARANCE, put your code in your theme's template files or funtions.php file.
Many beggining WP developers lump all their code into the theme's functions.php file, this is often the wrong place for it (if that code might ever get exported to another theme, for instance). Only put code specific to a specific theme in a theme's functions.php .
To get Wordpress to recognize your plugin, create a php file and start the file like this:
<?php
/*
Plugin Name: My Caption Shortcode Plugin
Description: A really cool plugin
*/
function caption_shortcode( $atts, $content = null ) {
return '<span class="caption">' . $content . '</span>';
}
?>
Put this file in your plugins directory (usually, you should create a sub directory for each plugin). Plugins are usually held in /wp-content/plugins/ . Then you can activate or deactive the code as a plugin, when you go to the plugins tab in the admin menu.
Of course, this plugin won't do anything as is. Remember that plugin functionality should be hooked into Wordpress via action hooks, filters, and shortcodes. For a shortcode for instance, you'd use the function add_shortcode somewhere to let Wordpress know your function is a shortcode.

Wordpress - How to make plugin's short code usable in text widget

i've written a plugin which shortcodes can easily be used in every post and page. As this plugin can be useful in a sidebar as well i want to make the text widget usable for my shortcodes.
When i googled this i found out that i can use the add_filter() function to ensure that, but this is only possible if i have access to the theme's functions.php. But as i am the creator of the plugin and not of the theme, this is not usable for me.
Does anybody know how i can make a shortcode which is introduced with a plugin usable in the widgets section?
Thanks!
Open your theme's function file.
Find a free spot after the opening php tag that isn't part of a function.
add this:
if (!is_admin())
{
add_filter('widget_text', 'do_shortcode', 11);
}
save the file and you should be all set.
Open your page in edit mode.
Select your page location and line where you want to add short code.
Add code here and update..

Categories